默认选择的MatChips不与MatChipList selected属性同步

Question

默认选择的MatChips不与MatChipList同步选择属性，初始选择的芯片是空的，尽管选择了Lime。当我们再次双击时，芯片将被添加到选定的，但不是最初。演示这里

Answer 1

我希望它能帮到你：StackBlitz在这里

HTML：

<mat-chip-list #chipList multiple="true">
  <mat-chip *ngFor="let fruit of fruits" [value]="fruit.name" [selected]="fruit.selected" (click)="onSelectFruit(fruit)">
    {{fruit.name}}
  </mat-chip>
</mat-chip-list>
<div class="hintLabel">Select Fruits</div>
<br/>
  <button (click)="getSelectedChips()">Get Selected Chips</button>
<br/><br/>
<b>Selected Chips:</b>{{array | json}}<br/><br/>
<b>Dynamic Selected Chips:</b>{{arrayDynamic | json}}

TS：

array: Fruit["name"][] = [];
arrayDynamic: Fruit["name"][] = [];

ngOnInit(){
  for (let fruit of this.fruits) {
    if(fruit.selected){this.arrayDynamic.push(fruit.name);}
  }
}

onSelectFruit(fruit){
  fruit.selected=!fruit.selected
  this.arrayDynamic = [];
  for (let fruit of this.fruits) {
    if(fruit.selected){this.arrayDynamic.push(fruit.name);}
  }
}

getSelectedChips() {
  this.array = [];
  for (let fruit of this.fruits) {
    if(fruit.selected){this.array.push(fruit.name);}
  }
}

演示：

​

​