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">

Это работаетхорошо, если мне нужно только добавить к массиву значений {ключ: '', значение: ''} Но иногда я хочу добавить, например, {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">