Angular ngFor 动态属性

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}}']

How to bind a dynamic property to ngFor. For example: I want to bind item.Name in one moment, but item.Value in different situations.

Answer 1

There are some more ways I guess, but I usually do the following:

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

this keyword can be excluded in most versions of Angular, but may be not in older ones. Tested with Angular 6, and it works fine without this keyword: [value]="option[field]" .

Pay attention, that you don't really need interpolation, here I just take an option object and read the specific key, which is stored as a string in field class property. For example, if field class property has a 'qwerty' value, that part of HTML equals to [value]="option['qwerty']" , and the binding will change when the value changes.

Here is a working STACKBLITZ , you can check a console and ensure, that the binding changes dynamically.

Answer 2

如果您有一些变量告诉您​​何时要使用它们中的每一个，您可以创建一个条件，例如：

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