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

Question

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

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', info: 'assets/mat-info2.png', description: `Some more displaying material.`
    },

    {image: 'assets/image.png', link: 'link3.com',
    button_name: 'B3', info: 'assets/mat-info2.png', 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 对话框：

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 中而不一次显示所有描述的最佳方法是什么？ 我知道这很多，所以请随时提出后续问题。

Answer 1

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

材质对话框允许您将数据注入正在打开的对话框中。 请参阅此处的对话框示例并查看Injecting data when opening a dialog示例Injecting data when opening a dialog的Injecting data when opening a dialog 。

有了这个，您可以将要显示的数据注入到对话框中。

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

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

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

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

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

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

这使您的 Dialog 保持通用和简单，并将责任放在打开对话框以传递应该显示的信息的过程上。

祝你好运。

Answer 2

将数据传递给对话框：

您的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>