Angular 6 Material - Изменить разделитель в мате, выбрать несколько вариантов

Question

У меня есть мат-выбор в моей форме с несколькими вариантами ( Здесь вы можете увидеть демонстрацию ).

<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('♨')