Question

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

我在mat-chip上使用selectionChange @Output来查看芯片选择的结果，但似乎eventEmitter没有在芯片选择上触发？

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;
}

在这种情况下，点击选择根本不会发出任何事件。这是一个仍在开发中的东西，还是选择意味着与我的想法有所不同？

Answer 1

不确定此组件的用途是什么，因为它仍在进行中，但似乎是提供一个禁用和启用可选内容的界面，以及其他一些功能。

您没有看到任何事件被触发，因为您尚未激活已选中。

在你的情况下，这样的事情会解决它。

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

此外，如果您想使其更通用，请使用*ngFor指令

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'}
  ];

Answer 2

这是我可以用来使其工作的示例。即使默认情况下选择了类别也可以使用。您也可以使用select()方法来代替我在演示中使用的selectViaInteraction()。

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;
}

示例：

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
  }
];

Answer 3

以上实现为我带来了一些错误。找出了一种检测选择的简单方法：

  import { NgModule, ModuleWithProviders } from '@angular/core';

 import { XSRFStrategy } from '@angular/http';
 import { HttpClientModule } from '@angular/common/http';
 import { APP_BASE_HREF } from '@angular/common';
 import { Router, RouterModule } from '@angular/router';
 import { LoginModule } from '../login/login.module';
 import { HomeComponent } from '../home/home.component';
 import { RestModuleService } from '../core/core.module';
 import { HeaderXSRFStrategy } from '../shared/services/header-XSRF-strategy.service';
import { LocalStorageWrapperModule } from '../core/core.module';

import { AuthService } from '../login/auth.service';

 import { HOME_ROUTING, LeoCustomPreloader } from './home.routing';

 import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [
    HomeComponent
],
imports: [
    RouterModule,
    HOME_ROUTING,
    CommonModule,
    HttpClientModule,
    FormsModule
],
providers: [
    AuthService,
    RestModuleService,
    LocalesService,
    LocalStorageWrapperModule,
    { provide: LOCALE_ID, useValue: LOCALE },
    { provide: XSRFStrategy, useFactory: xsrfHeaderStrategy },
    Location
],
   bootstrap: [HomeComponent]
 })
  export class HomeModule {
    constructor(
    private authService: AuthService,
    private router: Router
    ) 
    {

    // Retrieve  userPrivStr from session storage for loggedin user

        // Already logged in, so go to the default target
        router.navigate([authService.getTargetURL()]);
      }
  }
 }


 export function xsrfHeaderStrategy() {
   return new HeaderXSRFStrategy(CSRF_NAME, CSRF_NAME);
  }

在TS中：

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

Answer 4

默认情况下，此控件可用于键盘输入。

要使其与鼠标配合使用，请使用#chip="matChip"并调用其select()

例如

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

Answer 5

这是一个有效的示例，经过大量搜索后，找到了堆栈溢出的解决方案，

模板文件

<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文件

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);
  }

mat-chip选择事件发射器没有触发？

5 个答案: