Angular2奇怪的形式行爲與* ngFor

Question

嘿再次爲那些已經看到我的幾個帖子關於這種形式與瓶......它又回來了。

在我開始解釋什麼，這裏是一個工作plunkr顯示問題：

Working Plunkr

注：我的第二個數組中顯示瓶typeId，它顯示的問題清晰。

---

問題：

我被檢查的綁定，以確保我選擇了正確傳遞，當我遇到一個問題有以下情形的值：

• 1 ：添加一些Order或Return order，以便您有幾個輸入。
• 2：選擇一些類型並在這些輸入中設置一些值。
• 3：如果刪除不是數組最後一個的任何輸入，然後重新添加輸入，則即使與ngModel的綁定仍然正確，值也會混亂。

有沒有辦法避免這種奇怪的行爲，使用標準Template Driven Forms？或者我必須通過ReactiveForms？

---

我會在這裏解釋一下我的大部分代碼：

我送液化氣瓶含其name和typeId陣列（bottleArray）到我的形式@Input()。

我將此陣列及其物體深入克隆到兩個獨立陣列中：orderedClonedArrayBottles和returnedClonedArrayBottles。

然後，我將值添加到我對應的顯示數組中：orderedBottles和returnedBottles，它們現在具有count值。

... 
@Input() private bottleArray: Bottle[]; 

private orderedClonedArrayBottles: Bottle[] = []; 
private returnedClonedArrayBottles: Bottle[] = []; 
private orderedBottles: BottleCommand[] = []; 
private returnedBottles: BottleCommand[] = []; 

ngOnChanges(changes) { 
    // Get @Input data when it's ready 
    if (changes.bottleArray) { 
    // Cloning the Array AND the Bottles 
    this.orderedClonedArrayBottles = this.deepClone(changes.bottleArray.currentValue); 
    this.returnedClonedArrayBottles = this.deepClone(changes.bottleArray.currentValue); 

    // Display first rows 
    if (this.orderedClonedArrayBottles.length > 0) { 
     this.orderedBottles.push(this.orderedClonedArrayBottles[0]); 
    } 
    if (this.returnedClonedArrayBottles.length > 0) { 
     this.returnedBottles.push(this.returnedClonedArrayBottles[0]); 
    } 
    } 
} 

我可以刪除任何陣列的任何指數用以下方法：

removeRow(index: number, type: string, event: Event): void { 
    event.stopPropagation(); 
    if (type == 'order') { 
    // Cleans the reference 'count' value. 
    this.orderedBottles[index].count = null; 
    this.orderedBottles.splice(index, 1); 
    } else { 
    this.returnedBottles[index].count = null; 
    this.returnedBottles.splice(index, 1); 
    } 
} 

我可以推物品在任何這些2個陣列具有2個獨立的按鈕：AddOrder()和AddReturnOrder()（相同的碼）：

addOrder(event: Event): void { 
    event.stopPropagation(); 
    // Limits to the number of types 
    if (this.orderedBottles.length < this.orderedClonedArrayBottles.length) { 
    let index = this.getAvailableIndex(this.orderedBottles, this.orderedClonedArrayBottles); 
    this.orderedBottles.push(this.orderedClonedArrayBottles[index]); 
    } 
} 

爲了避免推在我的陣列現有的參考，我用下面的方法，將讓我不ALR第一個可用索引伊迪顯示：

/** 
* Gets the first available index from 2 arrays containing the same references. 
* 
* @param {Object[]} displayedArray Array containing the occupied indexes 
* @param {Object[]} referenceArray Array containing all the indexes 
* @return {number} Index of the first available position 
*/ 
getAvailableIndex(displayedArray: Object[], referenceArray: Object[]): number { 
    let index: number = null; 
    // Gets the available indexes of Bottles by filtering the referenceArray with the displayedArray 
    let availablePositions: Object[] = referenceArray.filter(element => displayedArray.indexOf(element) < 0); 
    // Return the first position available 
    return index = referenceArray.indexOf(availablePositions[0]); 
} 

下面是相應的HTML：（更清晰的Plunkr）

<div fxLayout="row" style="max-width: 80%"> 
    <div fxLayout="column" style="min-width: 50%"> 

     <div fxLayout="row" style="max-width: 100%" *ngFor="let bottle of orderedBottles; let i = index"> 
     <md-select class="select" placeholder="Select bottle type" name="orderedTypeSelect_{{i}}" [(ngModel)]="orderedBottles[i].typeId"> 
      <md-option class="options" *ngFor="let type of bottleArray" [value]="type.typeId"> 
      {{ type.name }} 
      </md-option> 
     </md-select> 

     <md-input-container class="container"> 
      <input md-input type="number" name="orderedBottleInput_{{i}}" autocomplete="off" [(ngModel)]="orderedBottles[i].count" 
      step="1" min="0" max="99"> 
     </md-input-container> 

     <button class="button-row" type="button" (click)="removeRow(i, 'order', $event)">-</button> 

     {{orderedBottles[i].typeId}} - 
     {{orderedBottles[i].count}} 
     </div> 

    </div> 


    <div fxLayout="column" style="min-width: 50%"> 

     <div fxLayout="row" style="max-width: 100%" *ngFor="let bottle of returnedBottles; let j = index"> 
     <md-select class="select" placeholder="Select bottle type" name="returnedTypeSelect_{{j}}" [(ngModel)]="returnedBottles[j].typeId"> 
      <md-option class="options" *ngFor="let type of bottleArray; let z = index" [value]="bottleArray[z].typeId"> 
      {{ bottleArray[z].typeId }} 
      </md-option> 
     </md-select> 

     <md-input-container class="container"> 
      <input md-input type="number" name="returnedBottleInput_{{j}}" autocomplete="off" [(ngModel)]="returnedBottles[j].count" 
      step="1" min="0" max="99"> 
     </md-input-container> 

     <button style="margin-top: -20px;" class="button-row" type="button" (click)="removeRow(j, 'return', $event)">-</button> 

     {{returnedBottles[j].typeId}} - 
     {{returnedBottles[j].count}} 
     </div> 

    </div> 
    </div> 

    <div class="margin"> 
    <button md-raised-button type="button" class="submit-button" (click)="addOrder($event)">Add Order</button> 
    <button md-raised-button type="button" class="submit-button" (click)="addReturnOrder($event)">Add Return Order</button> 
    </div> 

Answer 1

使用trackBy避免混亂：

*ngFor="let bottle of orderedBottles; let i = index; trackBy: trackByFn" 

trackByFn(index) { 
    return index; 
} 

它也提高了你的表現

Modified Plunker

又見

• https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngfortrackby