mat-chip select event emitter not firing?

问题

Plunkr: http://plnkr.co/edit/y4e4jS89gOxRKQOyUW2r?p=preview

I'm using the selectionChange @Output on a mat-chip to see the resulting behavior of chip selection but it seems that the eventEmitter isn't firing on chip selection?

.html:

<mat-chip-list>
  <mat-chip (selectionChange)="changeSelected($event)">Papadum</mat-chip>
  <mat-chip (selectionChange)="changeSelected($event)">Naan</mat-chip>
  <mat-chip (selectionChange)="changeSelected($event)">Dal</mat-chip>
</mat-chip-list>

<p>Currently Selected: {{selected}}</p>

.ts:

selected: string;

changeSelected(e) {
  console.log(e);
  this.selected = e.value;
}

In this case, no event is emitted at all on click selection. Is this something that is still in development, or does selection mean something different from what I am thinking of?

回答1:

Not sure what the purpose of this component is, since it's still a work in progress, but it seems to be about providing an interface to disabling and enable selectable content, and some other features.

You're not seeing any events firing because you haven't activated selected.

In your case, something like this will resolve it.

  <mat-chip-list>
    <mat-chip [selected]="state1" (selectionChange)="changeSelected($event)" (click)="state1=!state1">Papadum</mat-chip>
    <mat-chip [selected]="state2" (selectionChange)="changeSelected($event)" (click)="state2=!state2"> Naan</mat-chip>
    <mat-chip [selected]="state3" (selectionChange)="changeSelected($event)" (click)="state3=!state3"> Dal</mat-chip>
  </mat-chip-list>

Also if you want to make this more generic, resort to *ngFor directive

in html

  <mat-chip-list>
    <mat-chip *ngFor="let chip of chips" [selected]="chip.state" (selectionChange)="changeSelected($event)" (click)="chip.state=!chip.state">{{chip.name}}</mat-chip>
  </mat-chip-list>

in ts

  chips = [
    {name: 'Papadum'},
    {name: 'Naan'},
    {name: 'Dal'}
  ];

回答2:

Here is a sample which I was able to use to make it working. works even if the categories are selected by default. You can also use select() method instead of selectViaInteraction() which I have used in the demo.

HTML:

<mat-chip-list #chipList [multiple]="true" [selectable]="true">
  <mat-chip *ngFor="let category of categories" #chip="matChip" (click)="category.selected ? chip.deselect() : chip.selectViaInteraction()" [selected]="category.selected" [selectable]="true" class="leadr-category-chip" (selectionChange)="changeSelected($event, category)">
    {{category.name}}
    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

TS:

changeSelected($event, category): void {
  category.selected = $event.selected;
}

SAMPLE:

this.categories = [
  {
    name: 'Category 1',
    selected: false
  },
  {
    name: 'Category 2',
    selected: true
  },
  {
    name: 'Category 3',
    selected: false
  },
  {
    name: 'Category 4',
    selected: true
  },
  {
    name: 'Category 5',
    selected: false
  }
];

回答3:

The above implementation threw some errors for me. Worked out a simple way to detect selection:

<mat-chip-list>
  <mat-chip  color="primary" [selected]="vehicle._id === selected_vehicle_id" *ngFor="let vehicle of available_vehicles" (click)="selectVehicle(vehicle)">{{vehicle.number}}</mat-chip>
</mat-chip-list>

In TS:

selectVehicle(v){
  this.selected_vehicle_id = v._id;
}

回答4:

By default this control works with keyboard input.

To make it work with mouse click use #chip="matChip" and call its select()

eg

<mat-chip-list>
   <mat-chip *ngFor="let item of items" #chip="matChip"  (click)='chip.select()' (selectionChange)='changeSelected($event, segment )'>{{item}}</mat-chip>
</mat-chip-list>

回答5:

This is working example, after a lot of search find a solution on stack overflow,

Template file

<mat-chip-list class="mat-chip-list-stacked"  aria-orientation="vertical">
    <mat-chip *ngFor="let item of religion" 
              [selected]="item.id === selected_religion_id" 
              (click)="selectReligion(item)">
                            {{item.name}}
    </mat-chip>
</mat-chip-list>

ts File

religion: any[] = [
    {name: 'Hinduism', id: 1},
    {name: 'Islam', id: 2},
    {name: 'Skikhism', id: 3},
    {name: 'Christianity', id: 4},
    {name: 'Other', id: 5}
  ];

selected_religion_id: any;

 selectReligion(religion) {
    this.selected_religion_id=religion.id;
    console.log(religion);
  }

来源：https://stackoverflow.com/questions/47961933/mat-chip-select-event-emitter-not-firing