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

似乎您忘记了关闭“ tr”标签。

Answer 3

字符串在JavaScript中是不可变的，这意味着我们无法将ngModel绑定到它们。您可以很容易地将数组转换为具有键颜色和字符串值的对象数组。这将解决您的绑定问题。这是一些代码。我还一起砍了一个stackbitz给你看。

但是，我还是建议乔伊·高夫的答案。该代码感觉更正确，也更容易解决。祝你好运！

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

可以使用[（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}}

是一种解决方法：不遍历Colors，仅遍历使用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}}

您可以看到stackblitz

如何将输入数组绑定到Angular中的模型

4 个答案: