我想使我的组件更可重用。在组件中,我使用ngModel绑定(bind)了两个值:elem.key和elem.value。问题是,无论我在哪里使用该组件,该元素都必须具有键和值属性,例如,来自Api的某些数据可能具有名称和昵称等。现在,我可以重复使用我的组件,但前提是值对象的关键是值(value)。我的代码:

的HTML:

<button (click)="addNew()">Add</button>
        <div *ngFor="let elem of elements">
          <text-input [(ngModel)]="elem.key" type="text"></text-input>
          <text-input [(ngModel)]="elem.value" type="text"></text-input>
        </div>

ts:
@Input() elements: any[];

  addNew() {
    this.elements.push({
      key: '',
      value: ''
      });
    }

如果我在另一个组件中使用组件:
        <input-key-value [elements]="values">

如果我只需要添加到值数组{key:”,value:''},它就可以正常工作,但是有时我想添加例如{name:``,nickname:''},因为这种格式的数据必须是发送到服务器。

我尝试添加另一个输入名称输入,{键:“名称”,值:“名称”},并在html中:
      <text-input [(ngModel)]="elem[inputs.key]" type="text"></text-input>
      <text-input [(ngModel)]="elem.[inputs.value]" type="text"></text-input>

但这又将错误的数据推送到我的主阵列。

最佳答案

这对我有用。

输入键值模板:

<div *ngFor="let elem of elements">
  <div *ngFor="let prop of keys(elem)" >
    <text-input type="text" [(ngModel)]="elem[prop]"></text-input>
  </div>
</div>

输入键值ts:
keys(element) {
    return Object.keys(element);
}

根据对象具有多少个属性,它可以渲染尽可能多的文本框。希望这会有所帮助。

09-10 11:29
查看更多