问题描述
我在我的项目中运行 ng build --prod.
我发现的是这个错误:
src\app\components\xxxx\xxxx.component.html(116,100): : 不能分配为 'total'，因为它是一个常量或只读属性.
在这一行我有这个代码:
我使用了 [(ngModel)]="total" --> 因为我希望即使不修改它也能保存该值.如果我使用 [value]="total" 这个错误不存在，但如果我不修改，我的值不会保存.
我在 ts 中通过这个函数得到的总数.这是只读的
get total() {返回 this.products.map(p => p.p_Unit_price * p.p_Quantity).reduce((a, b) => a + b, 0);}这个总数，显示所有产品的总数.
如何修改这段代码，可以吗?
HTML 代码:
<table align="center" class="table table-bordered table-hover"><头><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><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><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 class="input-field col s2" style="float: right;"><label for="total">小计</label><input formControlName="Subtotal" id="Subtotal" type="text" class="validate" [value]="total" [(ngModel)]="total">
<小时><br><div id="add_homebox_button_container" class="row" style="float: right;"><button id="add_client_button" type="submit" class="btn wave-effect wave-light">登记</表单>
Ts 代码:
export 类组件实现 OnInit {构造函数(......){this.addsale = this.fb.group({'小计': new FormControl('', Validators.required),'产品':this.fb.array([]),'total': new FormControl('', Validators.required),});}ngOnInit() {this.allproducts();所有产品() {this.products = this.ps.getProduct();}onaddsale() {this.areWeWaiting = true;让销售 = this.addsale.valuesale.products = this.products让 newSale = new Sale(sale);this.ws.saleitemcreate(newSale).subscribe(结果 =>{如果(结果 === 真){Materialize.toast('成功', 4000);} 别的 {this.areWeWaiting = false;}},错误 =>{this.areWeWaiting = false;});}得到总计(){返回 this.products.map(p => p.p_Unit_price * p.p_Quantity).reduce((a, b) => a + b, 0);}}
解决方案 使用 [value]="total" 并在保存时将总数添加到保存的值中.您不需要使用表单来收集值以进行保存.您可以在您的组件中处理此问题.
我想说，使用 ngModel 只是为了传递一些保存值是一种有点hacky 的方式.
我将编辑 onaddsale 方法以将总销售额添加到销售额中.然后你可以从 fb.group() 中删除 total 并从模板中删除 formControlName="total" ，因为你这样做真的不需要那个.
onaddsale() {this.areWeWaiting = true;让销售 = this.addsale.value;sale.products = this.products;//在这里传递总数sale.total = this.total;让 newSale = new Sale(sale);...}
I run ng build --prod in my project.
That I found is this error:
In this line I have this code:
<input formControlName="total" id="total" type="text" class="validate" [(ngModel)]="total">
I used [(ngModel)]="total" --> because I want the value to be saved even without modifying it. If I used [value]="total" this error doesn't exist, but my value doesn't saved If I not modify.
and this total I get by this function in ts. This is Read Only
get total() {
return this.products
.map(p => p.p_Unit_price * p.p_Quantity)
.reduce((a, b) => a + b, 0);
}
This total, show me total from all product.
How to modify this code, that working ok?
Edit:
Html code:
<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 code:
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);
}
}
解决方案 Use [value]="total" and add the total to saved values when saving. You do not need to use the form to collect the values for saving. You can handle this in your component.
I'd say that using ngModel just to pass some value for saving is a bit hacky way.
I'd edit the onaddsale method to add the total to the sale. Then you could delete the total from the fb.group() and remove the formControlName="total" from template as well, since you do not really need that.
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);
...
}
这篇关于无法分配给“total"，因为它是一个常量或只读属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-31 08:17