展示多个默认值，并在垫子式trigger内部的角材料垫子上使用芯片显示芯片

Question

i具有此代码，带有MAT-SELECT，该代码在MAT-SELECT-TRIGGER内部具有文本。当组件加载时，它不会显示此文本或有任何价值的内容。一旦我们单击一个选项，它将仅显示垫子 - 选择触发器内的值。 我需要这个，因为我想在MAT-SELECT上显示先前选择的和保存的选项（以MAT-CHIP的形式），以便用户能够看到先前选择的选项。 因此，占位符文字在这里不会有用。

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    // The following Sample text or any dynamic value will not be displayed on the
    // initial run. It only shows the value if an option is selected from the
    // dropdown
    <mat-select-trigger> Sample text </mat-select-trigger>
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

stackblitz链接：

Https：//stackblitz.com/edit/skhgptxb-m23a87cp？file = src％2fexample％2fSelect-custom-trigger-example.html 我想用垫子选择触发器将其与此相关：

<mat-select-trigger>
    <div class="chips">
        @for (option of options; track $index) {
        <mat-chip (removed)="removeOption(option)">
            {{ option.title }}
            <button matChipRemove>
                <mat-icon>remove_circle_outline</mat-icon>
            </button>
        </mat-chip>
        }
    </div>
</mat-select-trigger>

<mat-form-field>
  <mat-label>Toppings</mat-label>
     <mat-select [formControl]="toppings" multiple>
        <mat-select-trigger>
          <div class="chips">
            @for (topping of toppings.value; track $index) {
            <mat-chip (removed)="removeTopping(topping)">
              {{ topping }}
              <button matChipRemove>
                <mat-icon>cancel</mat-icon>
              </button>
            </mat-chip>
            }
          </div>
        </mat-select-trigger>
        @for (topping of toppingList; track topping) {
        <mat-option [value]="topping">{{topping}}</mat-option>
        }
     </mat-select>
</mat-form-field>

Answer 1