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" - ＆gt;因为我希望即使不修改它也可以保存该值。如果我使用[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方法以将总额添加到销售中。然后，您可以从total删除fb.group()并从模板中删除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'，因为它是常量或只读属性

1 个答案: