如何在角材中间接使用“垫选择列表”中的“垫列表选项”？

Question

我对权限列表进行了分组，以使用每个组的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 selected之后，Authority包含选中的选项。 这是.ts文件中的selectionChange函数

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

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

Answer 1

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

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

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

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