>

각 그룹에 대해 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);
}

  • 답변 # 1

    여기에서는 MatSelectionListChange 유형의 이벤트 전송 유형을 IAuthority []로 입력합니다.

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

    이것은 SelectionModel을 반환하지만 여전히 IAuthority []로 변환해야합니다.

    참고 : https://material.angular.io/components/list/api#MatSelectionList

  • 이전 java - 다른 클래스에서 arraylist 목록이 인식되지 않습니다
  • 다음 ios - Azure Active Directory Safari 리디렉션 문제