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

Question

我们当前正在使用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的输出，将得到以下输出：

<span class="ng-tns-c5-5 ng-star-inserted">Alabama (AL), Arizona (AZ), California (CA)</span>

如您所见，后者仅输出单个文本块，以逗号分隔。

在浏览API文档（https://material.angular.io/components/select/api）和示例（https://material.angular.io/components/select/examples）时，我看不到这样做的方法。我在Google上所做的大多数搜索都产生了与样式和主题相关的结果。我确实找到了此链接（Custom parent container for Angular material overlay container?），但是并没有涉及太多细节，我甚至不确定这是否是我想要的。

有人这样做吗？在ng-bootstrap中，这非常简单。只需为ng-template提供正确的指令，它将覆盖默认模板。

谢谢。

亚伦

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

在stackblitz上签出demo。

Answer 2

您可以使用角料屑自动完成组件来实现所需的输出

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

您可以将CSS应用于外观设计