Angular项目中如何仅在mat-select仅有1个选项时设置默认值

你可以通过监听users输入属性的变化，判断数组长度后自动赋值选中值，两步即可完成：

1. 修改组件TS逻辑 #

新增选中值存储变量，实现OnChanges接口监听输入属性变化，判断数组长度恰好为1时自动赋值：

import { Component, EventEmitter, Input, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core';
import { UtentiAgenda } from 'src/app/models/EventoServer';

@Component({
  selector: 'app-user-filter',
  templateUrl: './user-filter.component.html',
  styleUrls: ['./user-filter.component.css']
})
export class UserFilterComponent implements OnInit, OnChanges {
  @Input() users: UtentiAgenda[]
  @Output() filteredUsers: EventEmitter<number>= new EventEmitter()
  // 存储选中的用户ID
  selectedUserId: number | null = null;
  constructor() { }

  ngOnInit(): void { 
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 仅当users属性发生变化时执行逻辑
    if (changes['users'] && this.users) {
      if (this.users.length === 1) {
        this.selectedUserId = this.users[0].id;
        // 可选：自动触发事件通知父组件默认选中值，不需要可以删除该行
        this.filteredUsers.emit(this.selectedUserId);
      } else {
        // 其他场景清空选中值
        this.selectedUserId = null;
      }
    }
  }
}

选择OnChanges而不是ngOnInit处理，是为了兼容父组件异步从服务端获取users的场景，保证服务端数据返回后可以立刻触发判断逻辑。

2. 修改HTML模板绑定 #

将mat-select的固定value绑定替换为我们定义的selectedUserId变量即可：

<div class="combo">
<div>
    <mat-form-field appearance="outline" class="calendarfilter">
        <mat-label>Utente</mat-label>
        <mat-select (selectionChange)="filteredUsers.emit($event.value)" [value]="selectedUserId">
          <mat-option *ngFor="let user of users" [value]="user.id">
            {{user.descrizione}}
          </mat-option>
        </mat-select>
      </mat-form-field>
</div>
</div> 

父组件的调用代码不需要做任何修改。

内容的提问来源于stack exchange，提问作者Lorenzo Bertolaccini