Question

在我的fee-list.component.html模板中，我有以下类似内容：

<div class="container">
  <div class="row" *ngFor="let meta of fees">

<div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
      <th>Amount owing (AUD)</th>
      <th>Fee type</th>
      <th>Title</th>
      <th>Amount to pay (AUD)</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let fee of meta.fee">
      <td>{{ fee.balance }}</td>
      <td>{{ fee.type.desc }}</td>
      <td>{{ fee.title }}</td>
      <td><input id="{{ fee.id }}" type="text" name="toPay" value="{{ fee.balance }}"></td>
    </tr>
  </tbody>
</table>
</div>
  <div class="row">
    <div class="col-md-4"><strong>Total to pay: </strong><input type="text" name="total" value="{{ meta.total_sum }}"> </div>
  </div>
  </div>
</div>

对我的界面的要求是双重的。如果用户更改单个费用（费用余额）的值，则总文本输入字段中的值应更新。其次，如果更新了总输入字段，那么我需要相应地更新单个费用中的值（将这些费用从最早的费用减少到最新的费用）。

我的问题是，尽管这些输入字段确实具有唯一的ID（id =“ {{Fee.id}}），但如何为这些动态生成的输入字段绑定呢？我无法解决如何确定单个费用的目标我的打字稿文件中的字段。

Answer 1

一种方法（首选）是动态创建控件。

您的打字稿文件：

  constructor(){
    this.formGroup = new FormGroup();

     const controls = meta.fee.map((fee)=>{
         this.formGroup.addControl(fee.id, new FormControl(fee.balance))
     });

    // now you have a formGroup with all the controls and their value are initialized, you just need to use it in your template 
  }

您的模板：

<tbody>
    <tr *ngFor="let fee of meta.fee">
      <td>{{ fee.balance }}</td>
      <td>{{ fee.type.desc }}</td>
      <td>{{ fee.title }}</td>
      <td><input id="{{ fee.id }}" [formControl]="formGroup.get(fee.id)" type="text" name="toPay"></td>
    </tr>
  </tbody>

因此，很显然，在此之后，您就可以做任何事情，例如，如果您想更新其中的一个特定的东西：

  updateValue(){
   this.formGroup.get('oneOfThoseFeeIds').setValue('new value')
  }

注意：我有一段时间没有做过Angular了，不记得确切的语法，但是我希望这可以给您一条路径

Answer 2

使用ngModel进行双向绑定

<input [name]="fee.id" type="text" [(ngModel)]="fee.balance">

现在，当用户在文本框中键入内容时，它将直接更新数组中的值。

同样，您不应在属性上使用{{}}绑定，而应使用[box]语法使用属性绑定。

<input type="text" name="total" [value]="total_sum">

您可以像这样在TypeScript中计算总数

get total_sum() {
    return meta.fees.reduce((total, fee) => total + fee.balance, 0);
}

Answer 3

您不能仅为此使用服务吗？我想这是一种解决方法，因为您应该尝试使组件尽可能的小，并通过服务进行通信。

请查看角度文档中的本章：https://angular.io/tutorial/toh-pt4

获取Angular中动态命名输入的值

3 个答案: