Angular 6 动态行在添加时重置

Question

添加购买html

<div class="d-flex justify-content-center align-items-center">
  <div class="col-md-12 border">
    <div class="card-header header-elements-inline">
      <h4 class="card-title">Add Purchase</h4>
      <button [mat-dialog-close]="true" type="button" class="bootbox-close-button close" data-dismiss="modal"
        aria-hidden="true">×</button>
    </div>

    <form action="" #addPurchaseForm="ngForm" class="purchaseForm" (ngSubmit)="addPurchase(addPurchaseForm)" method="POST">
      <div class="card-body">
        <div class="col-md-12">
          <div class="row justify-content-center">
            <div class="col-md">
                <div class="form-group form-group-float">
                  <label class="form-group-float-label is-visible">Select vendor to add product</label>
                  <ng-select [items]="vendorData"  bindLabel="vendor_name" bindValue="vendor_id" name="vendor_name" #vendor_name="ngModel"
                     [searchable]="false" required appendTo="body" [closeOnSelect]="true" [(ngModel)]="purchaseDetails.vendor_id">
                    </ng-select>
                  <span *ngIf="addPurchaseForm.submitted && vendor_name.errors?.required" class="form-text text-danger">Product Sub
                    Vendor
                    is
                    Required</span>
                </div>
            </div>

            <div class="col-md">
              <div class="form-group form-group-float">
                <label class="form-group-float-label is-visible">Reciept No</label>
                <input [(ngModel)]="purchaseDetails.reciept_no" name="reciept_no" #reciept_no="ngModel" type="text" required class="form-control">
                <span *ngIf="addPurchaseForm.submitted && reciept_no.errors?.required" class="form-text text-danger">Product code
                  is
                  Required</span>
              </div>
            </div>

            <div class="col-md">
              <div class="form-group form-group-float">
                <label class="form-group-float-label is-visible">Purchased At</label>
                <mat-form-field>
                <input  [(ngModel)]="purchaseDetails.purchased_at" name="purchased_at" #purchased_at="ngModel"  required class="form-control" matInput [matDatepicker]="picker" placeholder="Choose a date">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
                <!-- <input [(ngModel)]="purchaseDetails.purchased_at" name="purchased_at" #purchased_at="ngModel" type="text" required class="form-control"> -->
                <span *ngIf="addPurchaseForm.submitted && purchased_at.errors?.required" class="form-text text-danger">Product code
                  is
                  Required</span>
              </div>
            </div>


          </div>
          <h4 class="card-title">Purchase Details</h4>

          <mat-dialog-content style="max-height:200px">
          <div class="row" *ngFor="let purchaseDetail of purchaseDetails; let i = index;">

            <div class="col-md">
                <div class="form-group form-group-float">
                  <label class="form-group-float-label is-visible">Select Product</label>
                  <ng-select [items]="productData"  bindLabel="product_name" bindValue="product_id" name="vendor_name" #product[i]="ngModel"
                     [searchable]="false" required appendTo="body" [closeOnSelect]="true" [(ngModel)]="purchaseDetails[i].product_id">
                  </ng-select>
                  <span *ngIf="addPurchaseForm.submitted && vendor_name.errors?.required" class="form-text text-danger">Product Sub
                    Vendor
                    is
                    Required</span>
                </div>
            </div>

            <div class="col-md">
            <div class="form-group form-group-float">
              <label class="form-group-float-label is-visible">Unit Rate</label>
              <input mask="0*.0*" value="{{purchaseDetails[i].rate}}" [(ngModel)]="purchaseDetails[i].rate" name="product_rate" #rate[i]="ngModel" type="text" required class="form-control">
              <span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Rate
                is
                Required</span>
            </div>
            </div>

            <div class="col-md">
            <div class="form-group form-group-float">
              <label class="form-group-float-label is-visible">Quantity</label>
              <input mask="0*" value="{{purchaseDetails[i].quantity}}" [(ngModel)]="purchaseDetails[i].quantity" name="product_quantity" #quantity[i]="ngModel" type="text" required class="form-control">
              <span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Quantity
                is
                Required</span>
            </div>
            </div>

            <!-- <div class="col-md">
              <div class="form-group form-group-float">
                <label class="form-group-float-label is-visible">Price</label>
                <input disabled [(ngModel)]="purchaseDetails[i].quantity * purchaseDetails[i].rate"  name="product_price" #price="ngModel" type="text" required
                  class="form-control">
                <span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Price
                  is
                  Required</span>
              </div>
            </div> -->

            <div class="col-md-1 align-self-md-center">
              <i (click)="removePurchaseDetail(i)" class="icon-minus-circle2 cursor-pointer fs-22 text-danger"></i>
            </div>


          </div>
          </mat-dialog-content>

          <div class="row justify-content-center mb-25">
            <i (click)="addNewPurchaseDetail()" class="icon-plus-circle2 fs-22 cursor-pointer text-indigo-800"></i>
          </div>



        </div>

        <div class="text-center">
          <button type="submit" [disabled]="!purchaseDetails.vendor_id" class="btn btn-primary">Add purchase <i class="icon-paperplane ml-2"></i></button>
        </div>
      </div>
    </form>

  </div>
</div>

添加购买组件

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-add-purchase',
  templateUrl: './add-purchase.component.html',
  styleUrls: ['./add-purchase.component.css']
})
export class AddPurchaseComponent implements OnInit {

  purchaseDetails : any = [{
    product_id : '',
    rate : '',
    price : '',
    quantity : ''
  }];
  vendorData : any;
  productData : any;

  constructor(@Inject(MAT_DIALOG_DATA) private addPurchaseData : any) { }

  ngOnInit() {
    console.log(this.addPurchaseData);
    console.log(this.purchaseDetails);
    this.vendorData = this.addPurchaseData.vendors;
    this.productData = this.addPurchaseData.products;
  }

  addNewPurchaseDetail(){
    console.log(this.purchaseDetails);
    this.purchaseDetails.push({
      product_id: '',
      rate: '',
      price: '',
      quantity: ''
    });
  }

  removePurchaseDetail(index){
    this.purchaseDetails.splice(index, 1);
  }



}

• 在添加新的购买详情行时

• 我能够获取该行，但我的值正在重置

• 我不知道自己做错了什么

• 有没有正确的方法来实现这一点

• 我是 Angular 新手，请指导我完成此操作

当我在控制台记录模型值时，它就在那里，但我不知道为什么这些行被重置了

Answer 1

发现问题：

输入名称应该是这样的：

 <input name="reciept_no[{{i}}]" [(ngModel)]="purchaseDetails.reciept_no"  #reciept_no="ngModel" type="text" required class="form-control">

我曾经是这样的：

 <input name="reciept_no" [(ngModel)]="purchaseDetails.reciept_no"  #reciept_no="ngModel" type="text" required class="form-control">