我们当前正在使用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提供正确的指令，它将覆盖默认模板。
谢谢。
亚伦