Angular Material mat-selection-list初始选中项无触发事件问题求助

问题原因 #

你通过模板中[selected]="isFirst"手动设置第一项选中，但这属于模板层面的静态初始化，不会触发组件内置的selectionChange或ngModelChange事件——这类事件仅响应用户交互或组件内部状态的主动变更，手动模板赋值不会触发它们，同时也会导致ngModel绑定的selectedContact初始为空，和视图选中状态不一致。

可行解决方案 #

方案1：利用AfterViewInit读取组件实例的选中状态

通过@ViewChild获取列表组件实例，在视图初始化完成后读取选中项，手动触发处理逻辑：

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatSelectionList } from '@angular/material/list';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  @ViewChild('contactsList') contactsList!: MatSelectionList;
  selectedContact: any;
  contacts: any[] = []; // 你的数据源

  ngAfterViewInit(): void {
    // 延迟执行确保Angular完成变更检测，同步视图选中状态到组件实例
    setTimeout(() => {
      const initialSelectedItem = this.contactsList.selectedOptions.selected[0];
      if (initialSelectedItem) {
        this.selectedContact = initialSelectedItem.value;
        this.onSelectionChanged(this.selectedContact);
      }
    }, 0);
  }

  onSelectionChanged(selected: any): void {
    // 你的业务处理逻辑
    console.log('初始化选中项:', selected);
  }
}

方案2：通过ngModel主动赋值同步状态（推荐）

放弃模板中[selected]="isFirst"的手动设置，改为在组件初始化时直接给selectedContact赋值，让双向绑定自动同步视图选中状态，同时触发ngModelChange事件：

1. 模板中移除[selected]="isFirst"：

<mat-selection-list #contactsList [(ngModel)]="selectedContact" [multiple]="false" hideSingleSelectionIndicator="true">
  <mat-list-option *ngFor="let contact of contacts; index as i" color="primary" [value]="contact">
    <!-- 列表项内容 -->
  </mat-list-option>
</mat-selection-list>

2. 组件初始化时赋值：

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

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  selectedContact: any;
  contacts: any[] = []; // 你的数据源

  ngOnInit(): void {
    if (this.contacts.length > 0) {
      this.selectedContact = this.contacts[0];
      // 或依赖ngModelChange自动触发onSelectionChanged
    }
  }

  onSelectionChanged(selected: any): void {
    console.log('选中项变更:', selected);
  }
}

这种方式完全遵循Angular双向绑定逻辑，避免视图与组件状态不一致的问题。

方案3：监听selectedOptions.changesObservable

通过监听列表选中项集合的变更事件，捕获初始化时的状态：

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatSelectionList } from '@angular/material/list';
import { take } from 'rxjs/operators';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild('contactsList') contactsList!: MatSelectionList;

  ngAfterViewInit(): void {
    // 仅监听一次初始化变更，避免后续交互重复触发
    this.contactsList.selectedOptions.changes.pipe(take(1)).subscribe(() => {
      const selectedItem = this.contactsList.selectedOptions.selected[0];
      if (selectedItem) {
        this.onSelectionChanged(selectedItem.value);
      }
    });
  }

  onSelectionChanged(selected: any): void {
    // 业务处理逻辑
  }
}

内容的提问来源于stack exchange，提问作者Timy Shark