Question

我正在尝试为建筑行业的用户创建一个动态表单，该表单将基于每层分析建筑物（任意数量的楼层）的输入：

用户最初会看到一个单层表格的表格，但可以选择添加额外的楼层：
我们应该可以添加任意数量的额外楼层，并根据需要删除特定楼层。

方式

为了实现这一目标，我尝试利用* ngFor并迭代一个数据，该数组将接收数据，使用ngModel绑定到数组中的每个对象。

component.html

<form *ngFor = "let storey of storeyData; let i = index; trackBy: trackByFn(i)">
    <md-select placeholder="Floor type" name ="floorTypeSelector{{i}}" [(ngModel)]="storeyData[i].floorTypes[0]">
        <md-option *ngFor="let floorType of floorTypes" [value]="floorType.value">
            {{floorType.viewValue}}
        </md-option>
     </md-select>

<button md-raised-button (click)="incrementStoreyNumber()">
    <md-icon>library_add</md-icon>
     Add storey
</button>

component.ts

export class FloorDetailsFormComponent implements OnInit {

selectedFloorType = [];
floorTypes = [
{value: 'concreteSlab', viewValue: 'Concrete slab'},
{value: 'suspendedTimber', viewValue: 'Suspended timber'},
{value: 'suspendedSlab', viewValue: 'Suspended slab'},
{value: 'wafflePod', viewValue: 'Waffle pod'}
]; 

storeyData = [{floorTypes: [],floorAreas:[] }];
storeyDataTemplate = {floorTypes: [], floorAreas:[]};

incrementStoreyNumber(){
    this.storeyData.push(this.storeyDataTemplate);
}

trackByFn(index){
 return index;
}
constructor() { }
ngOnInit() {
}

问题

似乎前两层正确绑定了它们的变量，但是更改任何第二层到第n层的选定值将改变所有其他层（第一层除外）。

在搜索有关类似问题的其他帖子后，我仍然不知道为什么会发生这种情况。其他问题是，对于* ngFor循环的每次迭代，都没有区分元素的名称，但是看看我的console.log，我可以看到每个元素的名称都应该被索引。

我看到的一件有趣的事情是，如果我将storeyData数组扩展到typescript文件中n层的长度，那么所有的层都会绑定到它们自己的独立变量，并且所有层都是稍后添加的n + 1具有相同的问题。

我尝试过使用trackBy功能，但我似乎也无法使用它。当我试图在飞行中扩展* ngFor范围时，我真的不了解引擎盖下发生了什么。也许这只是不好的做法？如果你能在这里帮助我，我将非常感激（即使它＆＃34;嘿，阅读 this ＆＃34;）

Answer 1

问题出在这一行：

this.storeyData.push(this.storeyDataTemplate);

当你将storeyDataTemplate添加到storeyData时，它是每次你推送时绑定的同一个对象，而ngFor跟踪同一个对象。如果您更改为：

this.storeyData.push({floorTypes: [], floorAreas:[]});

它会起作用。

DEMO

Angular * ngFor with ngModel using Select具有意外绑定

1 个答案: