Получить значения динамически именованных входов в Angular

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>

Требование к моему интерфейсу двоякое.Если пользователи изменяют значение индивидуального сбора (fee.balance), значение в поле ввода общего текста должно быть обновлено.Во-вторых, если обновляется поле ввода, мне нужно соответствующим образом обновить значения в отдельных сборах (уменьшив их на соответствующую сумму от самой старой платы до самой новой платы).

Мой вопрос: каксделать привязку для этих полей ввода, которые генерируются динамически, хотя они имеют уникальные идентификаторы (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