如何在Angular4 / Ionic中使用*ngFor时从列表中获取点击项目的详细信息
如何在Angular4 / Ionic中使用*ngFor时从列表中获取点击项目的详细信息
提问于 2018-08-23 12:44:18
我正在尝试获取项目的详细信息，但无法获取循环项目的详细信息。需要获取详细信息并在Ionic中创建的Modal中显示
模板编码：
<div class="row" *ngFor="let circularitem of circularmonthdata; let i = index">
<div class="col">{{circularitem.Circular_date}}</div>
<div class="col">{{circularitem.Circular_name}}</div>
<div class="col">
<a class="btn btn-small" (click)="openModal(i)">
<i class="fa fa-eye" aria-hidden="true"></i>
</a>
</div>
</div>组件类代码:我是在angular中使用Modal的新手，请让我知道如何从类中填充模式
public openModal(index) {
console.log("value is", index);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-23 12:50:16
您可以将circularItem作为参数传递：
(click)="openModal(circularItem)"在.ts中：
public openModal(item){
console.log(item);
}Stack Overflow用户
发布于 2018-08-23 13:34:46
你可以把它放在你的视图上
<button mat-raised-button class="btn btn-secondary" (click)="openModal(circularItem)" >Do Something</button>在您的组件上，您将看到以下内容。
openModal(circularItem){
const dialogConfig = new MatDialogConfig();
const dialogRef = this.dialog.open(MyDialogComponent,dialogConfig);
dialogRef.componentInstance.circularItem = circularItem;
dialogRef.afterClosed().subscribe(data => {
//do something
});
}请记住导入MatDialog和MatDialogConfig：
import { MatDialog, MatDialogConfig } from '@angular/material';并在构造函数上声明您的对话框：
constructor(private dialog: MatDialog) {}最后，您需要确保定义要传递给对话框组件的值。
export class MyDialogComponent implements OnInit {
circularItem; //or like this circularItem : CircularItem;
constructor(){}
// Then you can access it here like this
ngOnInit() {
console.log(this.circularItem);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51986135
复制相关文章
相似问题
腾讯云开发者
