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：``，nickname：''}这样的数据，格式必须发送到服务器。

我尝试添加另一个输入名称输入，{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：``，昵称：}}

中提供的示例传递键和值，

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

如果您要传递诸如{key：”，value：''}之类的元素，则无需传递元素键和元素值输入。您可以直接使用

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

Angular 4-使组件更可重用

2 个答案: