Angular 6 Material - 更改垫子中的分隔符 - 选择多个选项

Question

我的表单中有一个带有多个选项的 mat-select (You can see a demo in here)。

<mat-form-field style="width: 100%">
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

它在其输入字段中显示一个以逗号分隔的选定选项列表。有没有办法改变分隔符？

Answer 1

负责该分隔符的代码可以在这里找到https://github.com/angular/material2/blob/9f6aa843cd2f68562d3f5290688bbe5bab957bcf/src/lib/select/select.ts#L642

// TODO(crisbeto): delimiter should be configurable for proper localization.
return selectedOptions.join(', ');

如您所见，目前尚不支持。 但是 还有另一种方法来实现它。

只需添加自定义mat-select-trigger 如下：

<mat-select [formControl]="toppings" multiple ...>
    ...
    <mat-select-trigger>
        <span> {{toppings.value ? toppings.value.join('; ') : ''}}</span>
    </mat-select-trigger>
</mat-select>

Forked Demo

这样你就可以选择任何分隔符，例如：

toppings.value.join('♨')