根据对象在Mat-Dialog中显示不同的信息? [英] Display different information in Mat-Dialog depending on object?

问题描述

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

My project is essentially displaying a bunch of boxes on a screen. Essentially, each box holds a button that, when clicked, will link you to another page. This is the box object.

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生成的，如下所示:

They are generated in HTML like this:

<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:

I want to be able to click an icon and display a description of the box - via mat-dialog. The problem lies within my openDialog() function. I am trying to open and display the description of each box in when clicked. It's a standard mat-dialog in TS:

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生成完美，但是它列出了每个单独的描述，而不是仅仅列出我要寻找的描述.

The issue is that the mat-dialog is generating perfectly, but it is listing every single description rather than JUST the description I am looking for.

我看到了问题，因为ngFor将附加列表中每个项目的描述.我如何做到这一点，以便仅对适当对象进行相应的描述?

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

I looked into making some sort of If statement structure in the TS, alongside making individual dialogs for every object, but I'm not sure how that would work.

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

What is the best way to get my object descriptions to display in a mat-dialog without displaying all of the descriptions at once? I know this is a lot so please feel free to ask follow up questions.

推荐答案

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

Your app-dialog should take in data in constructor:

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

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

Dialog has one, single box available as data therefore it is easy to display only description passed in:

<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 方法中，并将其作为数据传递给对话框:

In your parent component add parameter to openDialog method and pass that as data to the dialog:

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>

这篇关于根据对象在Mat-Dialog中显示不同的信息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！