不能分配给"total"，因为它是常量或只读属性

Question

我在项目中运行ng build --prod。

我发现的是这个错误：

src\app\components\xxxx

\xxxx.component.html(116,100(： ： 无法分配 到"total"，因为它是常量或只读属性。

在这一行中，我有以下代码：

<input formControlName="total" id="total" type="text" class="validate" [(ngModel)]="total">

我使用了[(ngModel)]="total"-->，因为我希望即使不修改它也能保存该值。如果我使用[value]="total"则此错误不存在，但是如果我不修改，我的值不会保存。

这个总数我通过 ts 中的这个函数得到。这是只读的

get total() {
return this.products
.map(p => p.p_Unit_price * p.p_Quantity)
.reduce((a, b) => a + b, 0);
}

这个总数，显示所有产品的总数。

如何修改此代码，工作正常？

编辑：

网页代码：

<form [formGroup]="addsale" (ngSubmit)="onaddsale()">
<table align="center" class="table table-bordered table-hover">
<thead>
<tr style="color:black;">
<th>p_Product_type_id</th>
<th>p_product_id</th>
<th>p_Unit_price</th>
<th>p_Quantity</th>
</tr>
</thead>
<tbody>
<tr class="group" *ngFor="let item of products">
<td>{{item.p_Product_type_id}}</td>
<td>{{item.p_product_id}}</td>
<td>{{item.p_Unit_price}}</td>
<td>{{item.p_Quantity}}</td>
</tr>
</tbody>
</table>
<br>
<br>
<div class="row">
<div class="input-field col s2" style="float: right;">
<label for="total">Total {{total}} ALL</label>
<input formControlName="total" id="total" type="text" class="validate" [value]="total" [(ngModel)]="total">
</div>
<div class="input-field col s2" style="float: right;">
<label for="total">Subtotal</label>
<input formControlName="Subtotal" id="Subtotal" type="text" class="validate" [value]="total" [(ngModel)]="total">
</div>
</div>
<hr>
<br>
<div id="add_homebox_button_container" class="row" style="float: right;">
<button id="add_client_button" type="submit" class="btn waves-effect waves-light">
Register
</button>
</form>

Ts代码：

export class component implements OnInit {
constructor(.............
) {
this.addsale = this.fb.group({
'Subtotal': new FormControl('', Validators.required),
'products': this.fb.array([]),
'total': new FormControl('', Validators.required),
});
}
ngOnInit() {
this.allproducts();
allproducts() {
this.products = this.ps.getProduct();
}

onaddsale() {
this.areWeWaiting = true;
let sale = this.addsale.value
sale.products = this.products
let newSale = new Sale(sale);
this.ws.saleitemcreate(newSale).subscribe(
result => {
if (result === true) {
Materialize.toast('Successfully', 4000);
} else {
this.areWeWaiting = false;
}
},
error => {
this.areWeWaiting = false;
}
);
}
get total() {
return this.products
.map(p => p.p_Unit_price * p.p_Quantity)
.reduce((a, b) => a + b, 0);
}
}

Answer 1

保存时，请使用[value]="total"并将总计添加到保存的值中。您无需使用表单来收集要保存的值。您可以在组件中处理此问题。

我想说的是，使用ngModel只是为了传递一些保存值有点笨拙。

我会编辑onaddsale方法以将总数添加到销售中。然后，您可以从fb.group()中删除total并从模板中删除formControlName="total"，因为您并不真正需要它。

onaddsale() {
this.areWeWaiting = true;
let sale = this.addsale.value;
sale.products = this.products;
// pass total here
sale.total = this.total;
let newSale = new Sale(sale);
...
}