Question

我正在使用一个包含“widget”指令的组件，该指令当前包含组件模板中的一些硬编码变量。像这样：

<widget image="{{imageUrl}}" [theme]="{color: blue, hue: '600'}"></widget>

现在我想动态生成这些指令，我不知道如何只插入颜色数组中的颜色。它看起来像这样：

<div *ngFor='let user of _allusers; let rowIndex = index'>
   <widget image="{{imageUrl}}" [theme]="{color: colors[rowIndex], hue: '600'}"></widget>
</div>

也许我错了，但我不认为设置整个“主题”字符串是答案，因为颜色会随着模板循环的变化而变化 - 而不是组件代码中的某些事件/操作。我可以在组件模板中执行此操作，还是需要更改指令？

Answer 1

您可能在代码中做错了但这应该有效

<强> template.html

<div *ngFor='let user of _allusers; let rowIndex = index'>
  <div>{{user.name}}</div>
  <widget [theme]="{ color: colors[rowIndex], hue: '600'}"></widget>
</div>

<强> component.ts

colors = ['red', 'green', 'black']

<强> Plunker Example

Angular 2动态更改HTML

1 个答案: