Question

我试图在单击时获取项目的详细信息，但无法获取圆形项目的详细信息。要求是获取详细信息并显示在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>

组件类代码：我是刚开始使用Modal的人，请让我知道如何从类中填充模态

public openModal(index) {
  console.log("value is", index);
}

Answer 1

您可以将circularItem作为参数传递：

(click)="openModal(circularItem)"

在.ts中：

public openModal(item){
    console.log(item);
}

Answer 2

您可以在视图中查看

 <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 somthing
    });
  }

记住要导入MatDialog和MatDialogConfig：

import { MatDialog,  MatDialogConfig } from '@angular/material';

并在构造函数上声明对话框：

constructor(private dialog: MatDialog) {}

最后，您需要确保定义要传递给对话框组件的值。

export class MyDialogComponentimplements OnInit {
circularItem; //or like this circularItem : CircularItem;

constructor(){}
//Then you can access it here like this
  ngOnInit() {
    console.log(this.circularItem);
  }

}

如何在Angular4 / Ionic中使用* ngFor时从列表中获取单击的项目详细信息

2 个答案: