javascript - Angular 4 - 使组件更具可重用性

Question

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

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>

:

@Input() elements: any[];

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

如果我在另一个组件中使用我的组件:

        <input-key-value [elements]="values">

如果我只需要添加到值数组 {key: '', value: ''} 它工作正常但有时我想添加例如 {name: '', nickname: ''}, 导致数据在这必须将格式发送到服务器。

我尝试添加另一个 Input 名称输入，{key: 'name', value: 'name'} 在 html 中:

      <text-input [(ngModel)]="elem[inputs.key]" type="text"></text-input>
      <text-input [(ngModel)]="elem.[inputs.value]" type="text"></text-input>

但这又一次将错误的数据推送到我的主数组。

Answer 1

这对我有用。

输入键值模板:

<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);
}

根据您的对象具有的属性数量，它会呈现尽可能多的文本框。希望这会有所帮助。