Как привязать массив входов к модели в Angular

Question

Может ли кто-нибудь помочь мне с приведенным ниже кодом и указать причину, по которой он не работает.Я создаю серию входных данных из массива строк, и я хочу привязать каждое входное значение к соответствующему слоту в массиве строк.Кажется довольно стандартным, но я, кажется, не понимаю проблему.

Я пробовал следующие два случая, но массив Colors (= string []) остается пустым!

<tr *ngFor="let color of Colors; let i = index;">
 <td>
  <mat-form-field>
      <input required matInput placeholder="Color ({{ i + 1}})"   [name]="'color_' + i" [(ngModel)]="color">
  </mat-form-field>
</td>
</tr>

<tr *ngFor="let color of Colors; let i = index;">
 <td>
  <mat-form-field>
   <input required matInput placeholder="Color ({{ i + 1}})"  [name]="'color_' + i" [(ngModel)]="Colors[i]">
  </mat-form-field>
</td>
</tr>

Answer 1

Afaik ngModel требует, чтобы переменная была свойством класса.

Вы должны попробовать использовать реактивные формы

@Input() colors: string[];
public formGroup: FormGroup;
constructor(private formBuilder: FormBuilder) {
}

ngOnInit() {
  const formControls = {};
  this.colors.forEach(e => {
    formControls[e]: new FormControl(e);
  }
  this.formGroup = this.formBuilder.group(formControls);
}

Тогда в вашем html что-то вроде этого}

<tr *ngFor="let color of Colors; let i = index;" [formGroup]="formGroup">
 <td>
  <mat-form-field>
      <input required matInput placeholder="Color ({{ i + 1}})"   [name]="'color_' + i" [formControlName]="color">
  </mat-form-field>
</td>
</tr>

Я написал это на лету, так что не знаю, еслионо работает.Но с некоторыми изменениями это должно быть.

Answer 2

Возможно использование [(ngModel)] или ReactiveForms.

Проблема, если вы используете [(ngModel)], состоит в том, что вы не можете перебирать собственный массив.

//***WRONG**, you change "Colors" in input and is iterating over Colors
//you see that your form is "unestable"
<div *ngFor="let color of Colors; let i = index;">
   <input required matInput placeholder="Color ({{ i + 1}})"  [name]="'color_' + i" [(ngModel)]="Colors[i]">
</div>

но вы можете использовать

<tr *ngFor="let color of ' '.repeat(Colors.length).split(''); let i = index;">
 <td>
  <mat-form-field>
   <input required matInput placeholder="Color ({{ i + 1}})"  
               [name]="'color_' + i" [(ngModel)]="Colors[i]">
  </mat-form-field>
</td>
</tr>
<hr/>
{{Colors|json}}

Да, это обходной путь: не перебирать цвета, а только массив, созданный на лету с помощью String.repeat и split

' '.repeat(Colors.length).split('') //a string of same length that Colors.length

Используя ReactiveForm, лучше использовать FormArray

<div *ngIf="formArray" [formGroup]="formArray">
<tr *ngFor="let control of formArray.controls;let i=index">
 <td>
  <mat-form-field>
   <input matInput placeholder="Color ({{ i + 1}})"  [name]="'color_' + i" [formControl]="control">
  </mat-form-field>
</td>
</tr>
</div>
<hr/>
{{formArray?.value|json}}

Вы можете увидеть стекаблитц

Answer 3

Строки неизменны в JavaScript, что означает, что мы не можем привязать к ним ngModel. Вы можете довольно легко преобразовать ваш массив в массив объектов с цветом ключа и значением ваших строк. Это решит вашу проблему с привязкой. Вот код Я также взломал стека, чтобы показать вам.

Однако я бы порекомендовал ответ Джои Гоф. Этот код кажется более правильным и «угловым путем» решения этой проблемы. Удачи!

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  Colors = [{color: 'stringColor1'}, {color: 'stringColor2'}]
}

<tr *ngFor="let item of Colors; let i = index;">
  {{i}}
 <td>
  <input required placeholder="Color ({{ i + 1}})" [name]="'color_' + i" [(ngModel)]="item.color">
</td>
</tr>

{{Colors | json}}

См: https://stackblitz.com/edit/angular-sj623x

Answer 4

Кажется, вы забыли закрыть тег "tr".