Question

在Angular Material 2.0.0-beta.12中，在芯片列表中选择芯片时的行为是不正确的。请参阅https://plnkr.co/edit/dQKbJfgLiSjDKA6WwAZ1?p=preview并尝试切换筹码。这曾经至少在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>

和打字稿：

@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是一个布尔值，你如何使用它需要多个标志。我还包括完整性的值。

一个完整的傻瓜在这里：

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

它失败的原因主要是变化检测与当前的“在场”检测发生冲突，所以你必须自己手动完成。另外你是如何使用它的，你需要多个关键字。似乎是一种过于挑剔的角度材料控制。文档也不是100％。无论如何它现在正在工作，看看它是否适合你。

Answer 2

我一次只能选择一个芯片，就像单选按钮一样。我是通过以下方式做到的。可能不是最好的方法，但可以达到目的。

在html中：

        <mat-chip-list [multiple]="false">
            <mat-chip *ngFor="let chip of filterChips; let i=index"  selected="{{filterChips[i].selected}}"
                      (click)="toggleChip(filterChips[i])" [value]="chip.name">
                {{chip.name}}
            </mat-chip>
        </mat-chip-list>

在ts中：

  filterChips = [
    { name: 'name1', selected: false },
    { name: 'name2', selected: false },
    { name: 'name3', selected: false },
    { name: 'name4', selected: false }
  ]

  toggleChip(chip) {
    this.filterChips.forEach(c => { chip.name !== c.name ? c.selected = false : c.selected = true; });
    this.applyFilter(chip.name);
  }

在Angular Material中选择芯片时行为不正确

2 个答案: