Получите общее значение при вводе количества в элемент управления формой в угловом 8

#angular #typescript #formarray

Вопрос:

Я попытался получить общую стоимость каждого товара с помощью количества, введенного клиентом, но не смог найти способ достичь своей цели. Я получаю свою цену из JSON, и когда клиент вводит количество в FormControl, я хочу умножить эту цену*количество и установить в следующий столбец.

Html-Код

  <ng-container *ngFor="let attItems of filteredProductAttributeItems; let i = index">
                <tr>
                  <td [attr.rowspan]="attItems.ProductAttributeItems.length   1">{{ attItems.Name }}</td>
                </tr>
                <tr *ngFor="let att of attItems.ProductAttributeItems">
                  <td>{{ att.MasterProductAttributeItem.Name }}</td>
                  <td>{{ att.PriceAdjustment }}</td>
                  <td style="width: 15%; white-space: nowrap">
                    <input type="number" class="form-control form-control-sm" placeholder="Quantity" min="0" />
                  </td>
                  <td></td>
                </tr>
</ng-container> 
 

Код TS

 filteredProductAttributeItems: any[] = [];

clickToExpandAttItems(product) {
    this.productService.getProductAttributesItems(product.Id).subscribe(x => {
     Object.assign(this.filteredProductAttributeItems, x);
    });
} 
 

Идея, как мне нужно

Ответ №1:

Вы можете привязать свои входные данные к количеству, используя двустороннюю привязку ngModel :

 <td style="width: 15%; white-space: nowrap">
    <input type="number" class="form-control form-control-sm" placeholder="Quantity" min="0" [(ngModel)]="att.Quantity" />
</td>
<td>{{att.Quantity * att.PriceAdjustment}} result</td>
 

Комментарии:

1. Количество это не исходит от моего API.

2. Создайте свою собственную модель, содержащую эту логику, и сопоставьте с ней данные из API. Вам будет легче разработать логику презентации, если она будет отделена от ваших данных API.