typescript - Propiedad dinámica ngFor de Angular

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

Cómo vincular una propiedad dinámica a ngFor. Por ejemplo: quiero vincular item.Name en un momento, pero item.Value en diferentes situaciones.

Respuesta #1

Supongo que hay algunas formas más, pero normalmente hago lo siguiente:

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

La palabra clave this puede ser excluida en la mayoría de las versiones de Angular, pero puede que no en las más antiguas. Probado con Angular 6, y funciona bien sin la palabra clave this: [value]="option[field]".

Presta atención, que realmente no necesitas interpolación, aquí simplemente tomo un objeto option y leo la clave específica, que se almacena como una cadena en la propiedad de clase field. Por ejemplo, si la propiedad de clase field tiene un valor 'qwerty', esa parte del HTML equivale a [value]="option['qwerty']", y el enlace cambiará cuando el valor cambie.

Aquí hay un STACKBLITZ funcional, puedes revisar la consola y asegurarte de que el enlace cambie dinámicamente.

Respuesta #2

Puedes hacer una condición si tienes alguna variable que te indique cuándo quieres usar cada una de ellas, por ejemplo:

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