可以同时使用垫选择和垫芯片吗？

Question

我想知道是否有mat-select和mat-chip-list的“混合”。我要在chip-list中显示从mat-select中选择的选项。

如果是，该怎么办？

Answer 1

是的，有可能。您需要在node_modules中使用<mat-select-trigger>。在<mat-select>内的<mat-select-trigger>内。

在HTML模板中，您需要以下内容：

<mat-chip-list>

在您的<mat-form-field> <mat-label>Toppings</mat-label> <mat-select [formControl]="toppingsControl" multiple> <mat-select-trigger> <mat-chip-list> <mat-chip *ngFor="let topping of toppingsControl.value" [removable]="true" (removed)="onToppingRemoved(topping)"> {{ topping }} <mat-icon matChipRemove>cancel</mat-icon> </mat-chip> </mat-chip-list> </mat-select-trigger> <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option> </mat-select> </mat-form-field> <br/> <!-- only for debug --> {{ toppingsControl.value | json }} 中：

ts

Here is a complete example with Angular Material 9, but it works the same in version 6.

我希望这会有所帮助！

Answer 2

您可以通过将选定的值推入变量并在芯片列表中读取此变量来完成此操作。

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