Angular 4 - 使组件更可重用

Question

我想让我的组件更可重用。在组件中，我将两个值与 ngModel 绑定：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>

ts：

@Input() elements: any[];

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

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

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

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

我尝试添加另一个 Input name 输入，{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);
}

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

Answer 2

在您的添加新功能中，您可能需要执行以下操作

@Input() elements: any[];
@Input() elementKey: string = 'key';
@Input() elementValue: string = 'value';
addNewe() {
    const element = {};
    element[this.elementKey] = '';
    element[this.elementValue] = '';
    this.elements.push(element);
}

在你看来，你应该像下面那样做

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

当你使用这个组件时，你可能需要传递元素键和元素值

当您使用您的组件时。如果您必须传递如下所示的键和值，请根据您在评论中提供的示例 {name: '',nickname: ''}

<input-key-value [elements]="values" [elementKey]='name' [elementValue]='nickname'>

如果您要传递像 {key: '', value: ''} 这样的元素，则不需要传递元素键和元素值输入。你可以直接使用它

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