Можно ли использовать mat-select и mat-chips вместе? - PullRequest
Новая
       0

Можно ли использовать mat-select и mat-chips вместе?

0 голосов
/ 08 октября 2019

Я хочу знать, возможно ли иметь "микс" из mat-select и mat-chip-list. В chip-list я хочу показать выбранные опции из mat-select.

Если это так, как я могу это сделать?

1 Ответ

1 голос
/ 08 октября 2019

Вы можете сделать это, поместив выбранные значения в переменную и считав эту переменную в списке mat-chip.

HTML: 

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected" multiple>
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>
<mat-chip-list>
  <mat-chip *ngFor="let value of selected">{{value}}</mat-chip>
</mat-chip-list>

TS: 

import {Component} from '@angular/core';

@Component({
  selector: 'my-example',
  templateUrl: 'my-example.html',
  styleUrls: ['my-example.css'],
})
export class MyExample {
  selected: string[] = [];
}
...