基于mat-selection-list实现带关闭图标选择列表及遍历方案咨询

假设你需要的是分组式选择列表（父项作为分组标题，子项为可选择项），以下是针对你的问题的具体方案：

1. 能否用mat-selection-list实现？ #

完全可以。mat-selection-list支持自定义列表结构，你可以将父项作为分组标题，子项作为可选择的mat-list-option；如果需要父项也支持选择（比如勾选父项自动选中所有子项），只需额外添加联动逻辑即可。

基础实现（父项仅作为标题） #

<mat-selection-list>
  <!-- 遍历数据对象的键值对 -->
  <ng-container *ngFor="let [parentTitle, children] of Object.entries(data)">
    <!-- 父项分组标题 -->
    <mat-list-item style="font-weight: 600; pointer-events: none;">
      {{ parentTitle }}
    </mat-list-item>
    <!-- 子项选择选项 -->
    <mat-list-option *ngFor="let child of children">
      {{ child }}
    </mat-list-option>
  </ng-container>
</mat-selection-list>

带父项选择联动的实现 #

如果需要父项可勾选并联动子项状态，可搭配mat-checkbox实现：

<mat-selection-list>
  <ng-container *ngFor="let [parentTitle, children] of Object.entries(data)">
    <mat-list-item>
      <mat-checkbox 
        (change)="toggleGroupSelection($event, childrenGroup)"
        [checked]="isGroupSelected(childrenGroup)"
      >
        {{ parentTitle }}
      </mat-checkbox>
    </mat-list-item>
    <!-- 通过#childOptions收集当前组的子选项 -->
    <mat-list-option #childrenGroup *ngFor="let child of children">
      {{ child }}
    </mat-list-option>
  </ng-container>
</mat-selection-list>

组件逻辑：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatListOption } from '@angular/material/list';

@Component({ /* 组件元数据 */ })
export class YourComponent {
  data = { Parent1: ['child1', 'child2'], Parent2: ['child3', 'child4'] };
  @ViewChildren('childrenGroup') childGroups!: QueryList<QueryList<MatListOption>>;

  toggleGroupSelection(event: MatCheckboxChange, groupOptions: QueryList<MatListOption>) {
    groupOptions.forEach(option => option.selected = event.checked);
  }

  isGroupSelected(groupOptions: QueryList<MatListOption>): boolean {
    // 判断当前组是否全选
    return groupOptions.every(option => option.selected);
  }
}

2. 其他可行方案 #

• mat-expansion-panel + mat-checkbox：适合需要折叠/展开分组的场景，父项作为面板标题，子项放在面板内容中，同样可实现选择联动，视觉上更紧凑。
• mat-tree：如果你的数据层级更深，或需要半选状态（父项部分子项选中时的中间状态），mat-tree是更专业的选择，原生支持带复选框的树节点交互。
• 自定义分组列表：用普通HTML结构（div/ul/li）配合Angular的*ngFor和mat-checkbox，完全自定义样式与交互，灵活性最高。

3. 如何用*ngFor遍历你的数据结构 #

你的数据是键值对对象，*ngFor仅支持遍历可迭代对象（如数组），因此需要先将对象转换为可迭代的键值对数组，有两种常用方式：

方式一：模板中直接使用Object.entries() #

Angular模板允许直接调用Object的静态方法，一键遍历键值对：

<ng-container *ngFor="let [parentKey, childArray] of Object.entries(data)">
  <h4>{{ parentKey }}</h4>
  <ul>
    <li *ngFor="let child of childArray">{{ child }}</li>
  </ul>
</ng-container>

方式二：组件内预处理数据 #

如果希望模板更简洁，可在组件中将对象转换为数组后再遍历：

// 组件.ts文件
data = { Parent1: ['child1', 'child2'], Parent2: ['child3', 'child4'] };
// 将对象转换为键值对数组
groupedData: [string, string[]][] = Object.entries(this.data);

模板中遍历预处理后的数组：

<ng-container *ngFor="let group of groupedData">
  <h4>{{ group[0] }}</h4>
  <ul>
    <li *ngFor="let child of group[1]">{{ child }}</li>
  </ul>
</ng-container>

补充：单独遍历键或值 #

• 仅遍历父项名称：使用Object.keys(data)
• 仅遍历子项数组：使用Object.values(data)

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