html - *ngFor 中的 ngStyle 不起作用

Question

我正在尝试动态设置 left div 的大小取决于数组中元素的数量。为此，我使用了 calc()我的方法 [ngStyle] , 其中data.questions是我在其上绘制的对象数组。

为了证明计算有效，我将其添加到 <p> 中用于调试目的。

我的 html 中有以下内容:

<div id="progress">
    <div *ngFor="let question of data.questions; let i = index;"
         [ngStyle]="{'left': 'calc('+(i / data.questions.length * 100) + (1 / (data.questions.length * 2) * 100)+'%)'}">
        <p>{{(i / data.questions.length * 100) + (1 / (data.questions.length * 2) * 100)}}%</p>
    </div>
</div>

下面是渲染后的内容。你可以看到 [ngStyle]仅适用于 3 个生成的 div 中的第一个。为什么会这样？

<div _ngcontent-ydx-7="" id="progress" ng-reflect-ng-style="[object Object]" style="border-color: rgb(127, 167, 187);">
    <div _ngcontent-ydx-7="" ng-reflect-ng-style="[object Object]" style="left: calc(16.6667%);">
        <p _ngcontent-ydx-7="">16.666666666666664%</p> 
    </div>
    <div _ngcontent-ydx-7="" ng-reflect-ng-style="[object Object]">
        <p _ngcontent-ydx-7="">49.99999999999999%</p>
    </div>
    <div _ngcontent-ydx-7="" ng-reflect-ng-style="[object Object]">
        <p _ngcontent-ydx-7="">83.33333333333331%</p>
    </div>
</div>

注意: 我花了相当多的时间试图为此做一个 plunkr，但是它一直给我在我的 ngFor 中使用 data.questions 的错误，尽管这确实如上面所证明的那样有效(我的 plunkr 技能正在进步中......)。

以下是 data.questions 的简化版本供人们玩...

private questionOptions: string[] = [
  `Strongly Agree`,
  `Agree`,
  `Slightly Agree`,
  `Slightly Disagree`,
  `Disagree`,
  `Strongly Disagree`
];

private data = {
  questions: [{
      text: `Great service makes a difference to the customer.`,
      options: [{
          text: this.questionOptions[0],
          score: 3
        },
        {
          text: this.questionOptions[1],
          score: 2
        },
        {
          text: this.questionOptions[2],
          score: 1
        },
        {
          text: this.questionOptions[3],
          score: -1
        },
        {
          text: this.questionOptions[4],
          score: -2
        },
        {
          text: this.questionOptions[5],
          score: -3
        }
      ]
    },
    {
      text: `Great service can be provided every time we interact with our customers. `,
      options: [{
          text: this.questionOptions[0],
          score: 3
        },
        {
          text: this.questionOptions[1],
          score: 2
        },
        {
          text: this.questionOptions[2],
          score: 1
        },
        {
          text: this.questionOptions[3],
          score: -1
        },
        {
          text: this.questionOptions[4],
          score: -2
        },
        {
          text: this.questionOptions[5],
          score: -3
        }
      ]
    },
    {
      text: `Customer facing staff have more impact on providing great service than I do.`,
      options: [{
          text: this.questionOptions[0],
          score: -3
        },
        {
          text: this.questionOptions[1],
          score: -2
        },
        {
          text: this.questionOptions[2],
          score: -1
        },
        {
          text: this.questionOptions[3],
          score: 1
        },
        {
          text: this.questionOptions[4],
          score: 2
        },
        {
          text: this.questionOptions[5],
          score: 3
        }
      ]
    }
  ]
};

Answer 1

之前

calc(016.666666666666664%)

calc(33.3333333333333316.666666666666664%)

calc(66.6666666666666616.666666666666664%)

它们不是有效样式(第一次迭代除外)。您需要将计算结果放在方括号中，例如

'calc(' + // string

((i / data.questions.length * 100) + (1 / (data.questions.length * 2) * 100)) + // number

'%)' // string

总结

[ngStyle]="{'left': 'calc('+((i / data.questions.length * 100) + (1 / (data.questions.length * 2) * 100))+'%)'}"

Plunker Example