Как правильно привязать массив к атрибуту угловой модели входа?

Question

Я пытаюсь добавить и удалить элементы в таблицу угловых материалов (угловой 4 + материал бета), используя html <md-list>

Проблема заключается в том, что две привязки из массива .ts к html для массива (purchaseInvoiceStockItemList) не показывают нужные элементы.

Этот случай происходит, когда я удаляю один из элементов массива. Данные массива интерполяции 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);
    }
  }

Цените всю помощь здесь ..