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

Question

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

我如何将mat-badge的matBadgeHidden财产数据绑定到<mat-button-toggle>的selected财产？换句话说，我如何让这个工作matBadgeHidden="!selected"

源代码

<mat-button-toggle-group 
  #group="matButtonToggleGroup" 
  multiple=true>
  <mat-button-toggle 
    *ngFor="let image of images" 
    value="image.id"  
    matBadge="✔️" 
    matBadgePosition="above after" 
    matBadgeHidden="!selected" 
    matBadgeColor="basic" 
    style="padding-top:10px; padding-bottom:10px; margin:10px">
      <img src="{{image.url}}" />
  </mat-button-toggle>
</mat-button-toggle-group>

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