Angular 6-反应形式，使用复选框绑定图像

Question

在我的应用中，我有一种表单，在该表单中，用户需要在一个阶段中从给定图像中选择一个或多个图像。

在HTML中，我有图片和复选框

<div *ngFor="let image of images">
   <img id="image{{image.id}}" src="{{image.url}}" (click)="onImageClick">
   <mat-checkbox id="checkbox{{image.id}}"></mat-checkbox>
</div>

绑定图像的最佳方法是什么，以便在单击图像时选中正确的复选框？

例如在TS中（不起作用，“不能将'HTMLElement'类型转换为'MatCheckbox'类型”）

images = [
{
  'id': 1,
  'url': '../../../assets/imgs/img_00000001.jpg'
},
...
{
  'id': 4,
  'url': '../../../assets/imgs/img_00000004.jpg'
}
];

...

onImageClick(id) { 
const checkbox = (<MatCheckbox>document.getElementById('checkbox' + id));
checkbox.checked = true;
}

感谢帮助