问题
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.`
},
}
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>
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>
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.
I see the problem, in that the ngFor will append the description of every item in the list. How can I make it so that it will only the corresponding description for the appropriate object?
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.
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.
回答1:
your DialogBox
class is initialized with ALLBOX
. without looking at how that is initialized, I'm assuming that this value contains all the box Definitions, and that you are looping through each and showing them in the template.
the Material Dialog allows you inject data into the dialog being opened. see The dialog Examples here and look at the Injecting data when opening a dialog
example.
with this you can inject the data that you want to show into the dialog.
what I would suggest, instead of having your DialogBox
holding a reference to every definition, is to use the injection to pass the specific Box you wish to show when you open the dialog. i.e.
this.dialog.open(DialogBox, {
data: selectedBox
})
the selectedBox
would be the current box you want to display in the Dialog when it's opened.
in your DialogBox
, you need to get the data being injected into it. this is achieved by updating your constructor to be
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
with this, your DialogBox component can display the data
that is injected into it.
this keeps your Dialog generic and simple, and puts the responsibility on the process that opens the dialog to pass in the information that should be displayed.
good luck.
回答2:
Pass data to 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) {}
....
}
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>
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'
});
}
and finally in 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>
来源:https://stackoverflow.com/questions/64654738/display-different-information-in-mat-dialog-depending-on-object