角度材料选择 - 自定义模板答案

【问题标题】：Angular Material Select - Customize Template角度材料选择 - 自定义模板
【发布时间】：2020-02-29 20:38:24
【问题描述】：

我们目前正在使用 NG Bootstrap，出于各种原因需要更换它。我提倡使用 Angular Material 代替它。但是，对于多选下拉菜单，我们需要 mat-select 的输出看起来更像这样：

而不是这样：

需要注意的是，每个项目都是一个单独的小部件，并附有一个关闭链接（x）。可以单击该链接，单击它会删除该项目。

检查 ng-select 的输出会为您提供以下输出：

<div class="ng-value-container"><div class="ng-placeholder">Select States...</div><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]",
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><div _ngcontent-c61="" class="ng-value"><span _ngcontent-c61="" class="ng-value-label"><i _ngcontent-c61="" class="icon-earth"></i> Alabama (AL)</span><span _ngcontent-c61="" aria-hidden="true" class="ng-value-icon right">×</span></div><div _ngcontent-c61="" class="ng-value"><span _ngcontent-c61="" class="ng-value-label"><i _ngcontent-c61="" class="icon-earth"></i> Arizona (AZ)</span><span _ngcontent-c61="" aria-hidden="true" class="ng-value-icon right">×</span></div><div _ngcontent-c61="" class="ng-value"><span _ngcontent-c61="" class="ng-value-label"><i _ngcontent-c61="" class="icon-earth"></i> California (CA)</span><span _ngcontent-c61="" aria-hidden="true" class="ng-value-icon right">×</span></div><!----><!----><div class="ng-input"><input role="combobox" type="text" autocomplete="a409ea53b6de" autocorrect="off" autocapitalize="off" aria-expanded="true" aria-owns="a409ea53b6de" aria-activedescendant="aa8ba66e7ecc"></div></div>

检查 mat-select 的输出会得到以下输出：

&lt;span class="ng-tns-c5-5 ng-star-inserted"&gt;Alabama (AL), Arizona (AZ), California (CA)&lt;/span&gt;

如您所见，后者只输出一个文本块，用逗号分隔。

查看 API 文档 (https://material.angular.io/components/select/api) 和示例 (https://material.angular.io/components/select/examples)，我看不到这样做的方法。我在谷歌上进行的大多数搜索都产生了与样式和主题相关的结果。我确实找到了这个链接 (Custom parent container for Angular material overlay container?)，但它没有详细说明，我什至不确定这是否是我想要做的。

有人做过吗？在 ng-bootstrap 中，这很容易。只需提供一个带有正确指令的 ng-template，它就会覆盖默认模板。

谢谢。

亚伦

【问题讨论】：

标签： angular angular-material

【解决方案1】：

查看文档，您可以为您的选择指定一个自定义模板。 https://material.angular.io/components/select/overview#customizing-the-trigger-label.

mat-select-trigger 是您的自定义模板

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-select-trigger>
     <span class="custom" *ngFor="let top of toppings.value">
       {{top}}
     </span>
    </mat-select-trigger>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

【讨论】：

链接演示与mat-select-trigger无关。
感谢已删除，我认为在撰写本文时已经这样做了，但我一定是把那个 stackblitz 用在了别的东西上 :(

【解决方案2】：

您可以使用角材料芯片自动完成组件来实现您想要的输出

https://stackblitz.com/angular/olggjybxblp?file=src%2Fapp%2Fchips-autocomplete-example.ts

你可以应用你的 CSS 来看起来像你的设计

【讨论】：

哇。不到一小时就给出了两个很好的答案。谢谢，伙计们！