как сделать аналогичный [mat-dialog-close] в div?

Question

У меня есть один * ngFor на карте, и мне нужно после щелчка на карте получить выбранные данные в моем компоненте.

Я пытаюсь:

<div (click)="setProdutoEscolhido(data.produtos[i])" *ngFor="let produto of data.produtos; let i = index" class="card col-md-6">
   <div class="view overlay">
      <img *ngIf="produto.foto_prin_1 !=  null" class="card-img-top" src="{{produto.foto_prin_1}}"
       alt="Card image cap">
       <a href="#!">
          <div class="mask rgba-white-slight"></div>
       </a>
</div>

Моя машинопись:

constructor(public dialogRef: MatDialogRef<ModalProcuraProdutoVinculacao>,
@Inject(MAT_DIALOG_DATA) public data: any) {
}

setProdutoEscolhido(produto:Produtos){
  this.data.produtos = produto;
  this.dialogRef.close();
}

В родительском компоненте я добавил функцию обратного вызова:

  dialogRef.afterClosed().subscribe(result => {
    this.produtoAlvo = result;
    console.log(this.produtoAlvo);
  });

Если я попробую таким образом, я получу:

Ошибка ОШИБКИ: Ошибка при попытке различить '[объект объекта]'.Разрешены только массивы и итерации

Если я попытаюсь использовать [mat-dialog-close] в моем div, я получу:

"[mat-dialog-close] "это не известное свойство div.

Если я изменю div на кнопку [mat-dialog-close] =" data.produtos [i] ", я могу получить данные, ноcss портится.

Есть один способ получить аналогичное [mat-dialog-close] в моем div?

Я использую этот диалог:

https://material.angular.io/components/dialog/api

@ Редактировать: я изменяю свой код на:

 <div *ngFor="let produto of data.produtos; let i = index" class="card col-md-6" (click)="setProdutoEscolhido(produto)">

ts:

setProdutoEscolhido(produto: any){
  this.data = produto;
  this.dialogRef.close();
}

но теперь я не определен в моем console.log:

  dialogRef.afterClosed().subscribe(result => {
    this.produtoAlvo = result;
    console.log(this.produtoAlvo);
  });

Answer 1

Директива MatDialogClose может использоваться только с элементами button, но ее опция ввода (например, [mat-dialog-close]="result") может быть выполнена с помощью DialogRef с помощью параметра dialogResult функции close():

setProdutoEscolhido(produto: any){
    this.data = produto;
    this.dialogRef.close(produto);
}