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);
  });

如果我这样尝试，我会收到：

错误错误：尝试与'[object Object]'进行比较时出错。仅数组和允许迭代器

如果我尝试在div中使用[mat-dialog-close]，则会收到：

“ [mat-dialog-close]”不是div的已知属性。

如果我将div更改为按钮[mat-dialog-close] =“ data.produtos [i]”，我可以获取数据，但CSS会损坏。

有一种方法可以在我的div中获得类似的[mat-dialog-close]吗？

我正在使用此对话框：

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

@Edit：我将代码更改为：

 <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);
}

如何在div中进行类似的[mat-dialog-close]？

1 个答案: