html <md-list>
向Angular材质(角度4+材质beta)表中添加和删除项目问题是数组(purchaseInvoiceStockItemList)从.ts到html的两个绑定未显示正确的项目。
这种情况在我删除数组元素之一时发生。 HTML插值数组数据正确,但是数组项与输入模型的绑定不正确。 有人可以指出我所缺少的吗?
这是删除后显示正确值的数组
<div>{{purchaseInvoice.purchaseInvoiceStockItemList | json}}</div>
但是一旦遍历数组,我就看不到* item正确值 ..
<md-list>
<ng-template
let-index="index"
let-item
let-last="last"
ngFor
[ngForOf]="purchaseInvoice.purchaseInvoiceStockItemList"
>
<md-list-item
layout="row"
layout-wrap
(click)="selectLineItem(item, index)"
>
<span
class="invoice-form-list-item-index"
flex="10"
class="padding-side"
>
{{ index + 1 }}</span
>
<span flex="40" class="padding-side">
<md-input-container style="margin-top: -4px !important;">
<input
mdInput
placeholder="Choose Stock Item"
[(ngModel)]="item.stockItem.productName"
(focus)="filterStockItems($event.target.values)"
(keyup)="filterStockItems($event.target.value)"
[mdAutocomplete]="autoStockItems"
[ngModelOptions]="{ standalone: true }"
[readOnly]="isEditable == 'false'"
/>
<md-autocomplete #autoStockItems="mdAutocomplete">
<md-option
*ngFor="let fitem of filteredStockItems"
(click)="selectStockItem(fitem)"
>
{{ fitem.productName }}
</md-option>
</md-autocomplete>
</md-input-container>
</span>
<span flex="15" class="padding-side">
<md-input-container style="margin-top: -4px !important;">
<input
mdInput
type="number"
[(ngModel)]="item.qty"
(change)="itemValueChange(item)"
[readOnly]="isEditable == 'false'"
/>
</md-input-container>
</span>
<span flex="15" class="padding-side">
<md-input-container style="margin-top: -4px !important;">
<input
mdInput
type="number"
[(ngModel)]="item.rate"
(change)="itemValueChange(item)"
[readOnly]="isEditable == 'false'"
/>
</md-input-container>
</span>
<span flex="15" class="padding-side">
{{ item.itemTotal | amount }}
</span>
<span
flex="5"
style="cursor: pointer;text-align:right;"
class="padding-side"
*ngIf="isEditable == 'true'"
>
<md-icon color="accent" (click)="removeItem(index)"
>delete</md-icon
>
</span>
</md-list-item>
</ng-template>
</md-list>
打字稿
filterStockItems(val: string) {
if (this.isEditable == "true") {
this.filteredStockItems =
val && val != ""
? this.stockItemList.filter(
s => s.productName.toLowerCase().indexOf(val.toLowerCase()) >= 0
)
: this.stockItemList;
} else {
this.filteredStockItems = [];
}
}
addStockItem() {
if (
this.purchaseInvoice.purchaseInvoiceStockItemList.length == 0 ||
this.purchaseInvoice.purchaseInvoiceStockItemList[
this.purchaseInvoice.purchaseInvoiceStockItemList.length - 1
].stockItem.id != null
) {
let item = new PurchaseInvoiceItem();
item.id = null;
item.qty = 1;
item.itemTotal = 0.0;
item.taxInclusive = "true";
this.purchaseInvoice.purchaseInvoiceStockItemList.push(item);
}
}
selectLineItem(lineItem, index) {
if (this.itemSelected !== lineItem) {
this.itemSelected = lineItem;
}
}
selectStockItem(item: any) {
console.log(item);
this.itemSelected.stockItem.id = item.id;
this.itemSelected.taxInclusive = "false";
this.itemSelected.stockItem.productName = item.productName;
this.itemSelected.rate = item.costPrice;
this.itemCalculate(this.itemSelected);
this.addStockItem();
this.calculateTotal();
}
itemValueChange(item: any) {
this.itemCalculate(item);
this.calculateTotal();
}
itemCalculate(item: any) {
item.itemTotal = item.qty * item.rate;
}
calculateTotal() {
let total = 0;
this.purchaseInvoice.purchaseInvoiceStockItemList.forEach(element => {
let qty = element.qty;
let price = element.rate != null ? element.rate : 0.0;
console.log(element);
total += qty * price;
});
this.purchaseInvoice.purchaseSubTotal = total;
this.purchaseInvoice.totalPurchaseAmount =
total + this.purchaseInvoice.purchaseTaxAmount;
}
removeItem(index) {
if (this.purchaseInvoice.purchaseInvoiceStockItemList.length > 0) {
setTimeout(() => {
this.purchaseInvoice.purchaseInvoiceStockItemList.splice(index, 1);
this.calculateTotal();
}, 10);
}
}
感谢所有帮助。.