角表多输入文本框显示相同的值

Question

语言 - Angular 4

我有一个角表，它有多行。每行的最后一列都有一个文本框。当我在其中一行的文本框中输入值时，其他行中的所有其他文本框也会使用该值进行更新。

HTML 代码：

<div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Invoice Number</th>
                                            <th>Invoice Amount</th>
                                            <th>Amount Due</th>
                                            <th>Payment</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let row of invoices_items">
                                            <td>{{row.date}}</td>
                                            <td>{{row.invoice_number}}</td>
                                            <td>{{row.total}}</td>
                                            <td>{{row.amount_due}}</td>
                                            <td class="text-right col-md-2">
                                                <input type="text" class="form-control" id="payreported" name="payreported" 
                                                [(ngModel)]="newpayrec.payreported" (blur)="checkamount()"
                                                placeholder="Enter Payment Amt.">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

组件.ts

declare interface newpayrec {
   vendorname?: string;
   amount?:string;
   paydate?:string;
   paymode?:string;
   depositto?:string;   
   invoicedate?:string; 
   payreported?:string;
}
..............
.............

ngOnInit(){

    this.userId = localStorage.getItem('userId');

    this.newpayrec={
        vendorname:'',
        amount:'',
        paydate:'',
        paymode:'',
        depositto:'',
        payreported:''
    }

this.http.get('/api/xyz/'+this.userId)
  .subscribe(result=>{
        this.vendors = result.json().data;
    }, err =>{
      console.log('error in api');          
    }, () => {
        console.log('api executed successfully');  
    }        
    });
}

我只希望特定文本框具有值（我输入值的文本框），而不是更新表中的所有行。我如何实现这一目标？ TIA。

Answer 1

这种悲伤通常是由使用 *ngFor 时的 name 指令引起的。由于某些奇怪的原因，该名称对所有行都具有相同的引用。因此，您应该使用每一行的索引并将其附加到名称中。

在您的 ngFor 中，附加索引表达式“let i = index”。还要在输入名称后面加上“-{{i}}”

<tr *ngFor="let row of invoices_items;let i = index">
  <td>{{row.date}}</td>
  <td>{{row.invoice_number}}</td>
  <td>{{row.total}}</td>
  <td>{{row.amount_due}}</td>
  <td class="text-right col-md-2">
  <input type="text" class="form-control" id="payreported" name="payreported-{{i}}" [(ngModel)]="row.payreported" (blur)="checkamount()"                                                  placeholder="Enter Payment Amt.">
   </td>
 </tr>

Answer 2

因为您有 newpayrec.payreported 单个实例。并且您对所有行都使用相同的。您也将 [(ngModel)] 用作两种方式绑定，因此填充了值。 你需要每一行的不同实例。

例如

invoices_items 是对象数组。 因此，您需要在此循环之前将特定键 payreported 或 newpayrec 对象添加到行中。 所以你可以像[(ngModel)]="row.payreported"或[(ngModel)]="row.newpayrec.payreported"一样使用它

ex 单键

<tr *ngFor="let row of invoices_items">
  <td>{{row.date}}</td>
  <td>{{row.invoice_number}}</td>
  <td>{{row.total}}</td>
  <td>{{row.amount_due}}</td>
  <td class="text-right col-md-2">
  <input type="text" class="form-control" id="payreported" name="payreported" [(ngModel)]="row.payreported" (blur)="checkamount()"                                                  placeholder="Enter Payment Amt.">
   </td>
 </tr>