是否可以同时使用 mat-select 和 mat-chips？

Question

我想知道是否有可能“混合”mat-select和mat-chip-list。在 中chip-list，我想显示从mat-select.

如果是，我该怎么做？

Answer 1

对的，这是可能的。您需要<mat-select-trigger>在<mat-select>. 里面的<mat-select-trigger>地方<mat-chip-list>。

在您的 HTML 模板中，您需要类似的内容：

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

@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample {
  toppingsControl = new FormControl([]);
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

  onToppingRemoved(topping: string) {
    const toppings = this.toppingsControl.value as string[];
    this.removeFirst(toppings, topping);
    this.toppingsControl.setValue(toppings); // To trigger change detection
  }

  private removeFirst<T>(array: T[], toRemove: T): void {
    const index = array.indexOf(toRemove);
    if (index !== -1) {
      array.splice(index, 1);
    }
  }

}

这是一个使用 Angular Material 9 的完整示例，但它在版本 6 中的工作方式相同。

我希望这有帮助！

Answer 2

为了解决 Material 13 芯片列表显示错误的问题，我将其添加到我的 css 中

.mat-select-trigger {
   height: fit-content;
}