无法分配给“总计"，因为它是常量或只读属性 [英] Cannot assign to 'total' because it is a constant or a read-only property

问题描述

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

我发现的是此错误:

src \ app \ components \ xxxx \ xxxx.component.html(116,100)::无法分配 设为总计"，因为它是常量或只读属性.

src\app\components\xxxx\xxxx.component.html(116,100): : Cannot assign to 'total' because it is a constant or a read-only property.

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

In this line I have this code:

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

我使用了[(ngModel)]="total"->，因为我希望即使不进行修改也要保存该值.如果使用[value]="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.

这是我在ts中得到的总和.这是只读的

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?

HTML代码:

<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);
  }
}

推荐答案

在保存时，使用[value]="total"并将总计添加到已保存的值中.您无需使用表格来收集要保存的值.您可以在组件中进行处理.

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.

我想说，仅使用ngModel传递一些用于保存的值是一种小技巧.

I'd say that using ngModel just to pass some value for saving is a bit hacky way.

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

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);
    ...
  }

这篇关于无法分配给“总计"，因为它是常量或只读属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！