Question

我正在尝试向用户显示具有预定义值的芯片列表，并让用户选择其中一些。我的目标是通过点击选择多个芯片，并按照相应的反应。

问题是，不会发出单个事件。

我做错了什么？

管理-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>

管理-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事件并且它有效。在处理材料组件时，我遇到了几个类似的问题。无论如何，如果您对芯片上的数据而不是实际组件感到满意，那么您可以实现您想要的目标：

<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

Answer 2

MatChip选择必须手动处理 ...因此，为了选择SelectionChange发出一个值，您必须手动更改mat-chip组件选择状态。您可以通过两种方式进行更改：

将选定的值绑定到matChip组件，您可以修改该输入选择的值，例如在单击事件函数回调中:(在此示例中）我会在角色对象上选择一个属性：

<mat-chip *ngFor="let role of possibleRoles" [selected]="role.selected" (selectionChange)="onChipSelect($event)" (click)="roleClicked(role.id)"> {{role}} </mat-chip>

在 roleClicked 功能中执行此操作时，您必须计算所选角色的新状态。

获取参考到MatChip组件并强制设置选定。我不会发布这样的例子，因为我不推荐这个选项，但你可以在某些情况下使用它......

希望这有帮助。

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

2 个答案: