angular 绑定中的错误。？

Question

我有一个由 select 和文本输入组成的组件，其中“select”我可以用来 select 对象的描述和输入我可以写数量分配给这个。在我的表格中，我必须能够处理许多对象及其数量，因此，每次我 select 一个并分配一个数量，用一个按钮将它保存在一个对象中并用芯片显示它。

碰巧每次我这样做时，在集合中，所有项目都被替换为最后一个

Note: Angular CLI: Version 13.0.2 | npm 8.1.0

anotherWork = new workModel();
  anotherMaterial = new materialModel();
  anotherMaterialList = new Array<materialModel>();

  //FORM CONTROLS
  clientControl = new FormControl();
  descriptionControl = new FormControl();
  costControl = new FormControl();
  employeesControl = new FormControl();
  materialsControl = new FormControl();
  isFinishedControl = new FormControl();
  //[...
  //...
  //...]
    materialDescriptionChange(desc:string){
    this.anotherMaterial.description = desc;
  }

  materialQuantityChange(quan:string){
    this.anotherMaterial.quantity = parseFloat(quan);
  }

  addMaterial(id:string){
    this.anotherMaterial.id = id;
    this.anotherMaterialList.push(this.anotherMaterial);
    console.log(this.anotherMaterialList);
  }

<!--MATERIALES | CHIPS / SELECT / INPUT NUMBER / BUTTON-->
    <p>
        <mat-form-field  class="form-field" *ngIf="anotherMaterialList.length > 0">
            <mat-chip-list >
                <mat-chip *ngFor="let wmt of anotherMaterialList" >
                    {{wmt.description}} ({{wmt.quantity}})
                </mat-chip>
            </mat-chip-list>
        </mat-form-field>
    </p>
    <p *ngIf="materialList !== undefined">
        <!-- <mat-form-field appearance="legacy" class="form-field-material-select"> -->
        <mat-form-field appearance="legacy" class="form-field-material-select">
            <mat-label>Materiales</mat-label>
            <mat-select #ma [formControl]="materialsControl" (selectionChange)="materialDescriptionChange(ma.triggerValue)">
                <mat-select-trigger>
                    <span *ngIf="materialsControl.value?.length > 0">
                        {{ma.triggerValue}}
                    </span>
                </mat-select-trigger>
                <mat-option *ngFor="let m of materialList" [value]="m.id">
                    {{m.description}} ({{m.quantity}})
                </mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field appearance="legacy" class="form-field-material-input">
            <mat-label>Cantidad</mat-label>
            <input #q matInput placeholder="Cantidad" type="number" (change)="materialQuantityChange(q.value)" >
        </mat-form-field>
        <a (click)="addMaterial(ma.value)" color="primary" mat-raised-button class="form-field-material-button">
            <mat-icon>add</mat-icon>
        </a> 
        
    </p>

图像序列

1 - First step, before add an object

2 - One object is added

3 - Add second object

4 - Add third object

5 - Evolution of the object in the browser inspector

Answer 1

您似乎在使用相同的对象引用。每次要添加时尝试创建一个新的而不是重复使用 this.anotherMaterial:

addMaterial(id:string) {
  const material = new materialModel()
  material.id = id;
  material.description = this.anotherMaterial.description;
  material.quantity = this.anotherMaterial.quantity;
  this.anotherMaterialList.push(material);
  console.log(this.anotherMaterialList);
}

angular 绑定中的错误。？

Bug in angular binding.?

components

object

typescript

angular-material

angular