angular - 在 Angular Material 中选择芯片时的错误行为

Question

在 Angular Material 2.0.0-beta.12 中，在芯片列表中选择芯片时的行为不正确。请参阅 ( next.plnkr) 并尝试切换筹码。这至少在 2.0.0-beta.10 中有效。选择芯片时，其他先前选择的芯片可能会丢失其选定的样式。

我有这个 html 代码:

<mat-chip-list class="mat-chip-list-stacked">
  <mat-chip *ngFor="let chip of availableColors" selected="{{chip.selected}}"
  (click)="chip.selected = !chip.selected" [color]="chip.color">
    {{chip.name}}
  </mat-chip>
</mat-chip-list>

和 typescript :

@Component({
  selector: 'chips-stacked-example',
  templateUrl: 'chips-stacked-example.html',
  styleUrls: ['chips-stacked-example.css'],
})
export class ChipsStackedExample {
  color: string;

  availableColors = [
    { name: 'none', color: '', selected:true },
    { name: 'Primary', color: 'primary', selected:false },
    { name: 'Accent', color: 'accent', selected:true },
    { name: 'Warn', color: 'warn', selected:true }
  ];

}

我做错了什么，例如使用(点击)事件？注意数组的数据是一致的。只是演示文稿出错了。

Answer 1

这似乎与这篇 github 帖子有关: https://github.com/angular/angular/issues/6005

我的建议是将您的点击调用置于超时状态并使用 changedetectorref 项目。

  changeMe(chip) {
    let vm =this;
    setTimeout(function() {
      chip.selected = !chip.selected
      vm._changeDetectionRef.detectChanges();
    },10);
  }

我还需要更改 html 中的一些内容:

<mat-chip-list class="mat-chip-list-stacked" [multiple]="true">
      <mat-chip *ngFor="let chip of availableColors; let i=index"  selected="{{availableColors[i].selected}}"
 (click)="changeMe(availableColors[i])" [color]="chip.color"  [value]="chip.name" [selectable]="true">
    {{chip.name}}
  </mat-chip>

</mat-chip-list>

Selectable 是一个 bool 值，您如何使用它需要多个标志。我还包含了完整性值。

一个完整的 plunkr 在这里:

https://plnkr.co/edit/qD99AN?p=preview

它失败的原因主要是变化检测与当前的“进行中”检测发生冲突，因此您必须自己手动进行。此外，您如何使用它还需要 multiple 关键字。似乎是对 Angular Material 的过于挑剔的控制。文档也不是 100%。不管怎样，它现在可以正常工作了，看看它是否适合您。