Angular中mat-select切换仅显示国家码需失焦才生效的问题

I get the issue you’re running into—right now, your mat-select only updates to display just the country code after it loses focus, instead of right when the dropdown closes. Let’s fix this with two straightforward solutions:

Solution 1: Use Material’s dedicated panel events (cleanest approach) #

Instead of relying on openedChange, leverage the panelOpened and panelClosed events built into mat-select. These events fire exactly when the dropdown panel opens and closes, ensuring your showCountry state updates at the perfect moment for the view to refresh instantly.

Updated HTML: #

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

Updated Component TS: #

You can remove the toogleCountry() method entirely now—we’re handling the state directly in the template events:

export class YourComponent {
  showCountry = false;
  selected: string;
}

Solution 2: Force change detection (if you prefer keeping openedChange) #

If you want to stick with your original openedChange setup, the problem is that Angular’s automatic change detection isn’t picking up the showCountry update right away. We can manually trigger it using ChangeDetectorRef:

Updated Component TS: #

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

@Component({
  // Your component metadata here (selector, templateUrl, etc.)
})
export class YourComponent {
  showCountry = false;
  selected: string;

  constructor(private cdr: ChangeDetectorRef) {}

  toogleCountry() {
    this.showCountry = !this.showCountry;
    // Manually tell Angular to refresh the view
    this.cdr.detectChanges();
  }
}

Why your original code didn’t work #

The openedChange event fires after the panel’s state has changed, but sometimes Angular’s change detection cycle doesn’t catch this update immediately. This causes the view to stay stuck showing the country name until the next cycle (like when the element loses focus). Using the dedicated panel events or manual change detection fixes this by ensuring the view updates right when the state changes.

内容的提问来源于stack exchange，提问作者Sarthak Agrawal