如何在角材料中间接使用mat-selection-list中的mat-list-option？答案

【问题标题】：How to use mat-list-option in mat-selection-list indirectly in angular material?如何在角材料中间接使用mat-selection-list中的mat-list-option？
【发布时间】：2019-08-04 11:50:37
【问题描述】：

我已经对权限列表进行了分组，以便使用 mat-expansion-panel 为每个组改进 ux 以使组可折叠。但是当检查某些选项时，mat-selection-list 不会改变。这是html文件：

<mat-selection-list *ngIf="!formProperty.root.schema.readOnly" #list [(ngModel)]="selectedAuthority"
                                        (selectionChange)="selectionChange($event)">
    <div *ngFor="let key of objectKey(groupedAuthorities())">
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title matSubheader>
                    <h3 translate>app.{{key}}.home.title</h3>
                </mat-panel-title>
            </mat-expansion-panel-header>
            <mat-list-option [value]="authority" *ngFor="let authority of groupedAuthorities()[key] ; let i = index;">
                <p AuthorityTranslate>
            {{authority.name}}
                </p>
            </mat-list-option>
        </mat-expansion-panel>
    </div>
</mat-selection-list>

当我点击一个复选框时 selectionChange($event) 正在调用，但 selectedAuthority 是一个空列表。而如果 mat-list-option 紧跟在 mat-selection-list selectedAuthority 之后，则包含选中的选项。这是 .ts 文件中的 selectionChange 函数

public selectionChange(authorities: IAuthority[]): void {

    this.formProperty.setValue(authorities, false);
}

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在这里，您将 MatSelectionListChange 类型的类型转换事件键入 IAuthority[]。

(selectionChange)="selectionChange($event.source.selectedOptions)"

这将返回 SelectionModel，您仍然需要将其转换为 IAuthority[]。

供参考：https://material.angular.io/components/list/api#MatSelectionList

【讨论】：