Угловой материал выбрать несколько отображаемых значений

Question

Можно ли изменить отображаемое значение в множественном выборе углового материала?Как я могу это сделать, например, Продукты: (0/12) зависит от количества выбранных товаров.

Answer 1

В дополнение к ответу выше, чтобы установить исходное значение для выбора, вы должны расширить select-custom-trigger-example.ts в данной демонстрации stackblitz:

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';

/** @title Select with custom trigger text */
@Component({
  selector: 'select-custom-trigger-example',
  templateUrl: 'select-custom-trigger-example.html',
  styleUrls: ['select-custom-trigger-example.css'],
})
export class SelectCustomTriggerExample implements OnInit {
  toppings = new FormControl();

  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

  ngOnInit()
  {
    // initalSelection could be the result from a service call (database, backend, etc.):
    let initalSelection : string [] = ["Onion","Pepperoni","Sausage"];

    // set initalSelection as inital value:
    this.toppings.setValue(initalSelection);
  }
}

Answer 2

Используйте <mat-select-trigger> для этого.Например:

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-select-trigger>
      {{toppings.value ? toppings.value[0] : ''}}
      <span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
        (+{{toppings.value.length - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
      </span>
    </mat-select-trigger>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

См. Демо здесь: https://stackblitz.com/angular/qkjbojyxebly?file=app%2Fselect-custom-trigger-example.html