Question

语言-角度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>

Component.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

因为您有df Out[112]: A#1 A#0.25 A#10 A#2 B#1 B#0.25 B#10 B#2 0 0 0 0 0 0 0 0 0个单一实例。并且您对所有行使用相同的名称。您也可以使用[（ngModel）]作为两种方式进行绑定，因此可以填充值。您需要每行的不同实例。

例如。

import pandas as pd pd.concat( [pd.read_csv(filename, dtype=str) for filename in ["f1.csv", "f2.csv", "f3.csv"]], axis=0, ).to_csv("union.csv")是对象数组。因此，您需要在此循环之前将特定键newpayrec.payreported或invoices_items对象添加到行中。因此您可以像payreported或newpayrec

一样使用它

单键输入

[(ngModel)]="row.payreported"

Answer 2

这种悲伤通常是由使用* 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>

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

2 个答案: