(点击)芯片上的ExpressionChangedAfterItHasBeenCheckedError

时间:2018-08-21 22:53:32

标签: javascript angular

尝试在垫子芯片的点击事件上设置值时,出现了ExpressionChangedAfterItHaHasBeenCheckedError

我创建了一个堆栈闪电来查看操作中的错误(打开控制台,然后单击两个或更多芯片):https://stackblitz.com/edit/angular-ddapw1?file=app/chips-stacked-example.html

// index.html
<mat-chip-list>
  <mat-chip
      *ngFor="let chip of availableItems; index as idx"
      [selected]="selectedItems.indexOf(idx) > -1"
      (click)="select(idx)">
    {{chip}}
  </mat-chip>
</mat-chip-list>

// index.js
import {Component, ChangeDetectorRef} from '@angular/core';

@Component({
  selector: 'chips-stacked-example',
  templateUrl: 'chips-stacked-example.html',
  styleUrls: ['chips-stacked-example.css'],
})
export class ChipsStackedExample {
  constructor(private cdr: ChangeDetectorRef) {}
  availableItems = ['foo', 'bar', 'baz'];
  selectedItems = [];
  select(idx) {
    console.log('selecting', idx);
    this.selectedItems.push(idx);
    //this.cdr.detectChanges()
  }
}

1 个答案:

答案 0 :(得分:2)

您忘记添加multiple属性:

<mat-chip-list multiple>