如何将空字符串输入数组按角度绑定到ngModel

Question

我正在尝试将一个空字符串数组绑定到ngModel中的ngFor中。

testObject.dynamicFields = ['','','',''];

<div *ngIf="testLabels.length > 0">
    <ng-container *ngFor="let item of testObject.dynamicFields; let i = index">
      <input
        *ngIf="testLabels[i]?.type === 'text'"
        [name]="'item_' + i"
        [(ngModel)]="(testObject?.dynamicFields)[i]"
      >
      <kendo-datetimepicker
        class="form-control m-b-20"
        [name]="'item_' + i"
        *ngIf="filterLabels[i]?.dataType === 'date'"
        [format]="'MM-dd-yyyy HH:mm:ss'"
        [(ngModel)]="(testObject?.dynamicFields)[i]"
      ></kendo-datetimepicker>
    </ng-container>
  </div>
</div>

我不知道我在哪里做错了，当我在一个文本框中输入一个值时，它也是在第二个文本框中输入值。

Answer 1

我将努力强调为什么会发生这种情况：

我不知道我在哪里做错了，当我在一个文本框中输入一个值时，它也是在第二个文本框中输入值。

这是因为这两个输入都绑定到来自dynamicFields的同一个dynamicFields。

小步：

迭代是通过dynamicFields的集合进行的。item (来自*ngFor="let item of testObject.dynamicFields)表示dynamicField。如果该dinamicField是一个具有多个属性(字段)的对象，那么您可以将每个输入绑定到一个属性，并且它们将独立地更新后面的模型，但实际上，一旦两个输入绑定到同一个模型[(ngModel)]="(testObject?.dynamicFields)[i]"，在更新另一个输入时通常会看到其他输入中的变化。

另一种情况是，两个输入的names是相同的。对于每个输入它们应该是不同的。

我将参考模板驱动的表单官方的角度文档，以获得更多关于命名控制元素的详细信息。

例如，如果修改模板以便为每个模型使用属性(字段)，则它们不会相互干扰。

<div *ngIf="testLabels.length > 0">
    <ng-container *ngFor="let item of testObject.dynamicFields; let i = index">
      <input
        *ngIf="testLabels[i]?.type === 'text'"
        [name]="'fieldOne_' + i"
        [(ngModel)]="item.fieldOne"
      >
      <kendo-datetimepicker
        class="form-control m-b-20"
        [name]="'fieldTwo_' + i"
        *ngIf="filterLabels[i]?.dataType === 'date'"
        [format]="'MM-dd-yyyy HH:mm:ss'"
        [(ngModel)]="item.fieldTwo"
      ></kendo-datetimepicker>
    </ng-container>
  </div>
</div>

注意:我们可以使用item本身，而不是(testObject?.dynamicFields)[i]，因为它的作用类似于foreach，其中item表示迭代的对象，而不仅仅是与for一样的索引。