如何设置垫选择控件的文本

Question

在此应用程序中：

https://stackblitz.com/edit/angular-mat-select-multi-with-formcontrol-6b7grk?file=app%2Fselect-overview-example.ts

是否可以使我可以通过编程方式设置 mat-select 的文本控件的值？

例如，现在，如果用户单击“one”，则控件的文本将变为“one”。另一个例子，如果他们单击“一”和“二”，则控件的文本将为“一，二”。

作为示例，我可以在第一种情况下显示“1”，在第二种情况下显示“1,2”吗？

Answer 1

我希望这能够满足您的要求：

选择预览示例.component.ts

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  @ViewChild('drop') dropControl: any;

  // public to template
  isOpen: boolean;
  allNums /** all numbers */ = [
    {
      ui: 'one',
      logic: 1,
    },
    {
      ui: 'two',
      logic: 2,
    },
  ];

  isOpening(isOpen: boolean) {
    this.isOpen = isOpen;
  }

}

选择-预览-example.component.html

<mat-form-field>
  <mat-select
    (openedChange)="isOpening($event)"
    #drop
    placeholder="Select numbers"
    multiple
  >
    <mat-option *ngFor="let num of allNums;">
      {{isOpen ? num.ui : num.logic}}
    </mat-option>
  </mat-select>
</mat-form-field>