Angular2奇怪的形式行为与* ngFor

嘿再次为那些已经看到我的几个帖子关于这种形式与瓶......它又回来了。Angular2奇怪的形式行为与* ngFor

在我开始解释什么，这里是一个工作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>

来源

2017-01-19 Alex Beugnet

使用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

来源

2017-01-19 09:54:51 yurzui

该死的是，简单的...谢谢！ –

Angular2奇怪的形式行为与* ngFor

回答

相关问题