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