Arrays Angular2带有*ngFor的怪异形态行为
嘿,对于那个些看过我几篇关于这个瓶子表格的帖子的人来说。。。又回来了 在我开始解释任何事情之前,这里有一个正在工作的plunkr显示了问题: 注意:我在第二个数组中显示瓶子Arrays Angular2带有*ngFor的怪异形态行为,arrays,angular,angular2-forms,Arrays,Angular,Angular2 Forms,嘿,对于那个些看过我几篇关于这个瓶子表格的帖子的人来说。。。又回来了 在我开始解释任何事情之前,这里有一个正在工作的plunkr显示了问题: 注意:我在第二个数组中显示瓶子typeId,它清楚地显示了问题 问题: 我正在检查绑定,以确保正确传递了所选的值,但遇到了以下场景中的问题: 1:添加一些订单或退货订单,以便有多个输入 2:选择一些类型并在这些输入中设置一些值 3:如果删除不是数组最后一个输入的任何输入,然后重新添加输入,则即使到ngModel的绑定仍然正确,值也会被弄乱 使用标准
typeId
,它清楚地显示了问题
问题: 我正在检查绑定,以确保正确传递了所选的值,但遇到了以下场景中的问题:
- 1:添加一些
或订单
,以便有多个输入退货订单
- 2:选择一些类型并在这些输入中设置一些值
- 3:如果删除不是数组最后一个输入的任何输入,然后重新添加输入,则即使到ngModel的绑定仍然正确,值也会被弄乱
模板驱动表单
,有没有办法避免这种奇怪的行为?或者我必须通过反应表单
我将在这里解释我的大部分代码: 我正在以
@Input()
的形式向我的表单发送一个气瓶数组(battlearray
),其中包含它们的name
和typeId
我将此数组及其对象深度克隆到两个单独的数组中:orderedClonedArrayBottles
和returnedClonedArrayBottles
然后,我将值添加到相应的显示数组中:orderedBaggles
和returnedBaggles
,它们现在有一个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);
}
}
我可以用两个单独的按钮按这两个数组中的任意一个:AddOrder()
和AddReturnOrder()
(相同的代码):
addOrder(事件:事件):无效{
event.stopPropagation();
//对类型数量的限制
if(this.orderedBaggles.length
为了避免在我的数组中推送现有引用,我使用以下方法来获取尚未显示的第一个可用索引:
/**
* 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]);
}
/**
*从包含相同引用的2个数组中获取第一个可用索引。
*
*@param{Object[]}显示包含已占用索引的数组
*@param{Object[]}包含所有索引的referenceArray数组
*@return{number}第一个可用位置的索引
*/
getAvailableIndex(displayedArray:Object[],referenceArray:Object[]):编号{
let索引:number=null;
//通过使用displayedArray筛选referenceArray,获取瓶子的可用索引
让可用位置:对象[]=referenceArray.filter(元素=>displayedArray.indexOf(元素)<0);
//返回第一个可用的位置
返回索引=referenceArray.indexOf(可用位置[0]);
}
这里是相应的HTML:(在Plunkr中更清晰)
{{type.name}}
-
{{OrderedBaggles[i].typeId}-
{{OrderedBaggles[i].count}
{{数组[z].typeId}
-
{{返回的瓶子[j].typeId}-
{{退回的瓶子[j].count}
添加订单
添加退货订单
使用trackBy
避免混乱:
*ngFor="let bottle of orderedBottles; let i = index; trackBy: trackByFn"
trackByFn(index) {
return index;
}
它还可以提高您的性能
另见
<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>
*ngFor="let bottle of orderedBottles; let i = index; trackBy: trackByFn"
trackByFn(index) {
return index;
}