Angular Material MatChipList 不会触发更改，也不会选择事件

Question

我正在尝试向用户显示具有预定义值的芯片列表，并让用户选择其中的一些。我的目标是通过点击选择多个筹码，并根据 react 使用react。

问题是，没有发出单个事件。

我做错了什么？

manage-roles.component.html

<mat-chip-list [selectable]="true" [multiple]="true"
  (change)="onChange($event)">
  <mat-chip *ngFor="let role of possibleRoles"
            [selectable]="true" (selectionChange)="onChipSelect($event)">
    {{role}}
  </mat-chip>
</mat-chip-list>

manage-roles.component.html

@Component({
  selector: 'hr-manage-roles',
  templateUrl: './manage-roles.component.html'
})
export class ManageRolesComponent implements AfterViewInit {
  @ViewChild(MatChipList) chipList: MatChipList;
  possibleRoles: string[] = Roles; // some const

  ngAfterViewInit(): void {
    this.chipList.chipSelectionChanges.subscribe(change => {
      console.log(change); // not fires
    })
  }

  onChange(change: MatChipListChange){
    console.log(change); // not fires
  }

  onChipSelect(change: MatChipSelectionChange) {
    console.log(change); // not fires
  }
}

package.json

  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.1.0",
    "@angular/material": "^5.0.0",
    "@angular/platform-browser": "^5.0.2",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.2",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }

Answer 1

尝试使用 (click)而不是 selectionChange事件并且它起作用了。我在处理 Material 组件时遇到了几个类似的问题。无论如何，如果您只对芯片上的数据而不是实际组件感到满意，那么您可以通过以下方式实现您想要的:

<mat-chip-list class="mat-chip-list-stacked" [selectable]="true" [multiple]="true">
  <mat-chip *ngFor="let chip of availableColors" (click)="selectMe(chip)">
    {{chip.name}}
  </mat-chip>
</mat-chip-list>

  public selectMe(event: any) {
    console.log(event);
  }

演示 here