Angular中Mat-Selection-List加载完成后如何设置选中项？

根据你提供的代码和数据情况，有两种常用的实现方式，优先推荐使用表单控件绑定的方案：

方法一：通过FormControl赋值（推荐） #

你的mat-selection-list已经绑定了formControlName="issueId"，这是Angular表单的标准用法，只需在subIssueList加载完成后，给对应的FormControl设置选中的issueId数组即可：

组件类代码示例 #

import { FormGroup, FormControl } from '@angular/forms';

export class YourComponent {
  subIssueList: any[] = [];
  // 假设你的表单定义如下（根据实际代码调整）
  yourForm = new FormGroup({
    issueId: new FormControl([])
  });

  // 模拟加载列表数据的方法（实际可能是API请求）
  loadSubIssues() {
    // 获取subIssueList数据
    this.subIssueList = [
      { issueId: 1, issueDesc: '描述1' },
      { issueId: 2, issueDesc: '描述2' },
      { issueId: 3, issueDesc: '描述3' }
    ];

    // 加载完成后设置选中项（替换为你的选中数组）
    const selectedIds = [1, 3];
    this.yourForm.get('issueId')?.setValue(selectedIds);
  }
}

原理：mat-selection-list与FormControl绑定后，控件的值就是选中项的[value]集合，直接赋值匹配的issueId数组，列表会自动选中对应的选项。

方法二：通过模板引用变量操作 #

如果不想依赖表单控件，可以利用模板中的#IssueList引用，在列表渲染完成后手动设置选中状态：

组件类代码示例 #

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

export class YourComponent {
  subIssueList: any[] = [];
  @ViewChild('IssueList') issueList!: MatSelectionList;
  selectedIds = [1, 3]; // 你的选中项数组

  loadSubIssues() {
    this.subIssueList = [/* 你的列表数据 */];
    
    // 等待视图渲染完成后设置选中
    setTimeout(() => {
      this.issueList.options.forEach(option => {
        option.selected = this.selectedIds.includes(option.value);
      });
    });
  }
}

关键注意事项 #

• 类型匹配：确保选中数组中的issueId和subIssueList里的issueId类型完全一致（比如都是数字或字符串），否则会匹配失败。
• 异步场景处理：如果是通过HTTP请求加载subIssueList，要在请求回调里执行选中设置，比如：

this.yourApiService.getSubIssues().subscribe(data => {
  this.subIssueList = data;
  this.yourForm.get('issueId')?.setValue(this.selectedIds);
});

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