Angular 4 - сделать компонент более пригодным для повторного использования

sosick спросил: 03 ноября 2018 в 08:48 в: javascript

Я хочу сделать мой компонент более пригодным для повторного использования. В компоненте я связываю два значения с помощью 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: '' , псевдоним: ''}, причина в том, что данные в этом формате должны быть отправлены на сервер.

Я попытался добавить еще одно входное имя ввода, {ключ: 'имя', значение: 'имя'} И в HTML

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

Но это снова приводит к отправке неверных данных в мой основной массив.


0 ответов