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

Question

我试图在点击项目时获取详细信息，但无法获取循环项目详细信息。要求是需要获取详细信息并显示在 Ionic 中创建的模式中

模板代码：

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

组件 Class 代码：我是 angular 中使用模态框的新手，请告诉我如何从 class

填充模态框

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

}

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

how to get clicked item details from list while using *ngFor in Angular4 / Ionic

angular-template

ionic-framework

angular2-ngfor

angular