无法分配给 'total'，因为它是常量或只读属性

Question

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

我发现的是这个错误：

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

在这一行我有这样的代码：

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

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

如何修改这段代码，可以正常工作？

编辑：

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

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

无法分配给 'total'，因为它是常量或只读属性

Cannot assign to 'total' because it is a constant or a read-only property

readonly

typescript

angular

angular5

无法分配给 'total'，因为它是常量或只读 属性

Cannot assign to 'total' because it is a constant or a read-only property

readonly

typescript

angular

angular5

无法分配给 'total'，因为它是常量或只读属性