Angular 带复选框替代项的材料选择列表？

相关的：

我尝试了很多解决方案，包括隐藏复选框（以便替换）：

：：ng deep.mat选项：第一个子.mat伪复选框{
显示：无；
}

或来自：

和其他各种技术…但没有一种能够成功地删除复选框

我能想到的另一件事是搞乱

视图封装

，或者使用

混合

；与用于构建网站的棱角材质类似：

@mixin组件查看器主题（$theme）{
//…为简洁起见省略了前奏曲
向导查看器，
应用程序组件查看器{
颜色：垫子颜色（$前景，文本）；
.mat选项卡标签：焦点{
颜色：垫子颜色（$前景，文本）；
}
}
}

…但这需要像他们那样维护一个主题加载层次结构。有更简单/更好的方法吗？

您可以使用简单的列表“模拟”选择列表

如果您有一个对象数组

typesOfShoes: any[] = [{data:'Boots'}, 
                       {data:'Clogs'}, 
                       {data:'Loafers'}, 
                       {data:'Moccasins'}, 
                       {data:'Sneakers'}]

你可以用

<mat-list>
    <ng-container *ngFor="let shoe of typesOfShoes">
            <mat-list-item >
        <button mat-button style="text-align:left;width:100%"
           (click)="shoe.selected=!shoe.selected">
        {{shoe.data}} - {{shoe.selected}}
        </button>
            </mat-list-item>
    </ng-container>
</mat-list>

{{shoe.data}-{{shoe.selected}

请参见中的示例

<mat-list>
    <ng-container *ngFor="let shoe of typesOfShoes">
            <mat-list-item >
        <button mat-button style="text-align:left;width:100%"
           (click)="shoe.selected=!shoe.selected">
        {{shoe.data}} - {{shoe.selected}}
        </button>
            </mat-list-item>
    </ng-container>
</mat-list>