Question

    <mat-select placeholder="{{placeholder}}" [compareWith]="compareValues" (selectionChange)="selectionChanged($event)">
      <mat-option #matOption *ngFor="let item of itemsList | async" [value]="item['{{value}}']">
        {{item.Name}}
      </mat-option>
    </mat-select>

item ['{{value}}']

如何将动态属性绑定到ngFor。例如：我想在一瞬间绑定item.Name，但在不同情况下绑定item.Value。

Answer 1

我猜还有更多方法，但是我通常会执行以下操作：

<option *ngFor="let option of options; let i = index" [value]="option[this.field]">
  Option {{i}}
</option>

this关键字在大多数版本的Angular中可以排除，但在较旧的版本中则不能。经过Angular 6的测试，它在没有this关键字[value]="option[field]"的情况下也可以正常工作。

请注意，您实际上并不需要插值，在这里，我只需要一个option对象并读取特定的键，该键作为字符串存储在field类属性中。例如，如果field类属性具有一个'qwerty'值，则HTML的该部分等于[value]="option['qwerty']"，并且当该值更改时，绑定也将更改。

这里STACKBLITZ工作正常，您可以检查控制台并确保绑定是动态变化的。

Answer 2

例如，如果您有一些变量要告诉您何时要使用它们中的每个变量，则可以设置条件。

{{Item.UseName ? Item.Name : Item.Vaule }}

Angular ngFor动态属性

2 个答案: