採用了棱角分明* ngFor與ngModel選擇具有意想不到的結合

我試圖創建一個動態的形式在建築行業用戶，這將在每個層的基礎作爲分析的輸入，針對建築（任何數量的樓層的）例如：採用了棱角分明* ngFor與ngModel選擇具有意想不到的結合

用戶最初呈現爲一個一層樓的形式，一種形式，但由於添加一個額外層的選項：
我們應該能夠添加任何數量的額外層樓高的，並根據需要刪除特定樓層。

方法

爲了實現這一點，我試圖利用* 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，我可以看到每個元素的名稱都應該被索引。

我見過的一件有趣的事情是，如果我將typyData數組展開爲typescript文件中的n層樓層，那麼所有樓層都會綁定到它們自己的獨立變量，並且所有樓層都是n層以後添加的+1有相同的問題。

我試過使用trackBy功能，但我似乎無法得到這個工作。當我試圖擴展* ngFor範圍時，我真的不瞭解底層的情況。也許這只是不好的做法？如果你能幫助我在這裏，我會非常感激（即使其「哎，閱讀了關於該」）

來源

2017-10-10 LNKX

退房這裏我的答案，我認爲這是對你的問題的解決方案：https://stackoverflow.com/questions/41265761/using-ngfor-with-ngmodel-dynamic-data-wrong-behaviour –

非常感謝Stefan的回覆。表單組的背景信息很有趣。我切換到使用[ngModelOptions] =「{standalone：true}」，並刪除鏈接解決方案中建議的name屬性，但它仍然表現出相同的行爲。這是我之前嘗試過的建議解決方案之一，但沒有取得太大的成功。 – LNKX

也在第二個ngfor上實現trackby。並將其更改爲無參數版本：trackBy：trackByFn和trackByFn（item，index）{return index} – Vega

的問題是在這條線：

this.storeyData.push(this.storeyDataTemplate);

當您添加storeyDataTemplate對於storeyData，每次推送時都會綁定同一個對象，並且ngFor跟蹤同一個對象。如果您更改爲：

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

它會工作。

DEMO

來源

2017-10-18 21:56:38 Vega

就是這樣！你是一個天才:)非常感謝你花時間去了解這個問題。該修復解釋了我所看到的所有行爲，併爲我介紹了ngFor的工作原理。只要我有足夠的聲望（我只有8 ...）我會熱情地讚揚這一點:) – LNKX

採用了棱角分明* ngFor與ngModel選擇具有意想不到的結合

回答

相關問題