问题1:在Angular中使用*ngFor遍历数据时,如何在MatDialog中传递当前循环的对象?
解决方法:
{{ item.name }}
import { Component, Inject } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
...
})
export class YourComponent {
constructor(public dialog: MatDialog) {}
openDialog(item: any): void {
const dialogRef = this.dialog.open(YourDialogComponent, {
data: item
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
...
})
export class YourDialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}
问题2:在MatDialog中如何获取到循环中每个对象的索引值?
解决方法:
{{ item.name }}
openDialog(item: any, index: number): void {
const dialogRef = this.dialog.open(YourDialogComponent, {
data: { item, index }
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
...
})
export class YourDialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
console.log(data.item); // 当前对象
console.log(data.index); // 当前索引值
}
}