mat-select:以编程方式预先选择项目

<!-- app.component.html -->
<mat-form-field>
  <mat-label>选择一个选项</mat-label>
  <mat-select [(ngModel)]="selectedOption">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options = [
    { value: 'option1', viewValue: '选项 1' },
    { value: 'option2', viewValue: '选项 2' },
    { value: 'option3', viewValue: '选项 3' }
  ];

  selectedOption = 'option2'; // 预先选择的选项
}

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

@Component({
  // ...
})
export class AppComponent {
  // ...

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    // 模拟异步操作
    setTimeout(() => {
      this.selectedOption = 'option3';
      this.cdr.detectChanges(); // 手动触发变更检测
    }, 1000);
  }
}