根据对象，在Mat-Dialog中显示不同的信息吗？

问题描述

我的项目实际上是在屏幕上显示一堆盒子。本质上，每个框都包含一个按钮，单击该按钮可以将您链接到另一个页面。这是盒子对象。

export interface Allbox {
    image: string,link: string,button_name: string,info: string; 
    description: string;
}

{image: 'assets/image.png',link: 'link1.com',button_name: 'B1',info: 'assets/mat-info2.png',description: `this is the description.`
    },{image: 'assets/image.png',link: 'link2.com',button_name: 'B2',description: `Some more displaying material.`
    },link: 'link3.com',button_name: 'B3',description: `What I want displayed.`
    },}

它们是用HTML生成的，如下所示：

<mat-card id="CARDBOX" *ngFor="let box of allbox">
                    <img class="logoy" src="{{box.image}}" height=35px>
                    <a href="{{box.link}}" class="button" target="_blank">{{box.button_name}}</a>
                    <input type="image" id="info" title="Click for description" src="{{box.info}}" (click)="openDialog()" height=20px/>
 </mat-card>

我希望能够通过mat-dialog单击图标并显示框的描述。 问题出在我的openDialog（）函数中。我试图在单击时打开并显示每个框的描述。这是TS中的标准mat-dialog：

constructor(public dialog: MatDialog) { }

  ngOnInit() {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogBox,{
      width: '400px',height: '600px'
    });
  }

  openSomethingElse(): void {
    
  }
}

@Component({
  selector: 'app-dialog',templateUrl: './dialog.component.html',styleUrls: ['./dialog.scss']
})

export class DialogBox {

  allbox = ALLBOX;

  constructor(public dialogRef: MatDialogRef<DialogBox>) {}

  onNoClick(): void {
    this.dialogRef.close()
  }
}

<title mat-dialog-title></title>
<div mat-dialog-content *ngFor="let box of allbox">
    {{box.description}}
</div>
<div mat-dialog-action>
    <button mat-button (click)="onNoClick()">Close</button>
</div>

问题是mat-dialog生成完美，但是它列出了每个单独的描述，而不是仅仅列出我要寻找的描述。

我看到了这个问题，因为ngFor将附加列表中每个项目的描述。我如何才能使它仅显示适当对象的相应说明？

我研究了在TS中建立某种If语句结构，以及为每个对象创建单独的对话框，但是我不确定这将如何工作。

什么是使我的对象描述显示在mat-dialog中而不同时显示所有描述的最佳方法？我知道很多，所以请随时提出后续问题。

解决方法

您的DialogBox类用ALLBOX初始化。在不考虑如何初始化的情况下，我假设此值包含所有框定义，并且您正在遍历每个定义并将它们显示在模板中。

“材质对话框”允许您将数据注入到打开的对话框中。参见dialog Examples here并查看Injecting data when opening a dialog示例。

您可以将要显示的数据注入对话框。

我建议，而不是让DialogBox保留对每个定义的引用，而是建议使用注入方式来传递您希望在打开对话框时显示的特定Box。即

this.dialog.open(DialogBox,{
  data: selectedBox
})

selectedBox将是您要在对话框打开时显示的当前框。

在您的DialogBox中，您需要获取正在注入的数据。这是通过将构造函数更新为

来实现的

constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}

以此，您的DialogBox组件可以显示注入其中的data。

这使您的对话框通用且简单，并负责打开对话框以传递应显示的信息的过程。

祝你好运。

,

通过data to dialog：

您的app-dialog应该在构造函数中接收数据：

export class DialogBox {
....
  constructor(public dialogRef: MatDialogRef<DialogBox>,@Inject(MAT_DIALOG_DATA) public data: Allbox) {}
  
....
}

对话框只有一个box可以用作数据，因此很容易仅显示传入的描述：

<title mat-dialog-title></title>
<div mat-dialog-content>
    {{data.description}}
</div>
<div mat-dialog-action>
    <button mat-button (click)="onNoClick()">Close</button>
</div>

在父组件中，将参数添加到openDialog方法中，并将其作为数据传递给对话框：

openDialog(box: Allbox): void {
    const dialogRef = this.dialog.open(DialogBox,{
      data: box,width: '400px',height: '600px'
    });
  }

最后是HTML：

<mat-card id="CARDBOX" *ngFor="let box of allbox">
  <img class="logoy" src="{{box.image}}" height=35px>
  <a href="{{box.link}}" class="button" target="_blank">{{box.button_name}}</a>
   <input type="image" id="info" title="Click for description" src="{{box.info}}"
        (click)="openDialog(box)" height=20px />
</mat-card>