показывает только код страны в материале-выберите angular

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>

и это в component.ts с помощью (openChange) события mat-select

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

, но я получаю желаемое результат после того, как я уберу фокус с мата выберите

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 для рабочего примера.