如何在两个数据组件之间进行数据绑定？

Question

我正在使用Angular Material使用<mat-button-toggle>和mat-badge创建图像选择器。 <mat-button-toggle>包含用户可以选择的图像，并且当mat-badge处于<mat-button-toggle>状态时，selected将覆盖绿色的选中标记。取消选择图像后，绿色的复选标记将被隐藏/从图像中删除。

如何将mat-badge的{​​{1}}属性绑定到matBadgeHidden的{​​{1}}属性？换句话说，我该如何运作<mat-button-toggle>

源代码

selected

链接到API文档：

1. Button Toggle
2. Badget

Answer 1

将matBadgeHidden属性绑定到mat-button-toggle checked属性。

<mat-button-toggle 
    #imageButton
    *ngFor="let image of images"  
    matBadge="✔️" 
    [matBadgeHidden]="!imageButton.checked">
</mat-button-toggle>

https://stackblitz.com/edit/angular-mfmpx5