仅在材料选择角度中显示国家/地区代码

Question

我在 HTML 中使用它

<mat-form-field style="width: 70px;margin-left: 50px;">
  <mat-label>Select an option</mat-label>
  <mat-select (openedChange)="toogleCountry()" [(value)]="selected">
    <mat-option value="+91">
      <span>{{"+91"}}</span>
      <span *ngIf="showCountry">{{"india"}}</span>
    </mat-option>
  </mat-select>
</mat-form-field>

这通过使用 mat-select 的 (openChange) 事件在 component.ts 中

showCountry = false;
toogleCountry() {
      this.showCountry = !this.showCountry;
  }

但是我从 mat select 中移除焦点后得到了想要的结果

Answer 1

您可以使用mat-select-trigger来实现您想要的。 您只需要定义在用户选择选项后应该可见的内容，例如<mat-select-trigger> {{ selected?.code }} </mat-select-trigger> 。

<mat-form-field style="width: 70px;margin-left: 50px;">
    <mat-label>Select an option</mat-label>
    <mat-select [(value)]="selected">
        <mat-select-trigger>
            {{ selected?.code }}
        </mat-select-trigger>
        <mat-option *ngFor="let opt of countries" [value]="opt">{{opt.code}} - {{opt.name}}</mat-option>
    </mat-select>
</mat-form-field>

看看这个Stackblitz的工作示例。