如何*ngfor over ngModel可绑定属性集

Question

我尝试使用*ngfor来表示一组相同的输入，保存输入应该绑定到的属性。

<mat-form-field *ngFor="let prop of [ID, Name, Nickname]">
    <input matInput type="text" placeholder="prop.key" #propInput [(ngModel)]="prop">
    <button mat-icon-button matSuffix mat-icon-button *ngIf="propInput.value" (click)="prop='';">
        <mat-icon>close</mat-icon>
    </button>
</mat-form-field>

 <!-- bind test -->
<input matInput type="text" placeholder="Name Test" #propInput [(ngModel)]="Name">

import { Component } from '@angular/core';
import { EntitySrcService } from '../entity-src.service';

@Component({
  selector: 'app-entity-table',
  templateUrl: './entity-table.component.html',
  styleUrls: ['./entity-table.component.less']
})

export class EntityTableComponent {

  constructor(
    private entitySrc: EntitySrcService
    ) {}

  public get ID(): string {
    return this.entitySrc.id;
  }

  public set ID(value: String) {
    this.entitySrc.id = value;
  }

  public get Name(): string {
    return this.entitySrc.name;
  }

  public set Name(value: String) {
    this.entitySrc.name = value;
  }

  public get Nickname(): string {
    return this.entitySrc.altName;
  }

  public set Nickname(value: String) {
    this.entitySrc.altName = value;
  }

}

我在组件中使用get/set属性代理到实际的存储位置，但我的理解是get/set属性应该与普通属性相同（使用普通属性具有相同的单向绑定行为）。

那么，如何正确地迭代一组要绑定到的属性呢？

Answer 1

看起来[ID,Name,Nickname]是值类型。在本例中，*NGFOR只使用它们的值，而不绑定到原始变量。如果仍然需要绑定，则应考虑将它们转换为引用类型。

例如，您可以将它们放入对象中，比如person或options，并使用KeyValuePipe迭代对象属性：如何使用*NGFOR迭代对象键

options: {[key: number]: string} = {ID: '1', Name: 'bar', Nickname: 'foo'};

<div *ngFor="let item of options | keyvalue">