如何在 Angular2/4 中将单击的材质卡的数据获取到对话框中？

Question

我有一个 *ngFor 循环，它在屏幕上显示所有材料卡（MatCard 或 mdCard，如果您使用的是旧版本）。当我单击任何 MatCard 时，会打开一个对话框。我想将材料卡的数据插入到对话框中。

这是我的 buyComponent.html

<div *ngIf="allItems" class="layout-row" >
<mat-card *ngFor="let item of allItems" class="flex-lg-20" (click)="OnMatCardClickEvent($event)">

  <mat-card-header class="flex-lg-20">
    <h2>{{item.itemName}}</h2>
    <br>
  </mat-card-header>
  <mat-card-content class="flex-lg-20">
    <h2>   </h2>
    <br>{{item.itemImageUrl}}
  </mat-card-content>

  <mat-card-content align="bottom" class="flex-lg-20">
    <div>Rs. {{item.itemPrice}}</div>

  </mat-card-content>
</mat-card><br><br><br>

这是我的 BuyComponent.ts

@Component({
selector: 'app-buy',templateUrl: './buy.component.html',
styleUrls: ['./buy.component.css']
})
export class BuyComponent implements OnInit {

  constructor(private sellItemService: SellItemService,

              private dialog:MatDialog) {
  }

  areThereItems: boolean = false;
  allItems: DialogItem[] = [];



  ngOnInit() {
    this.showAllItemDialogs();
  }

  OnMatCardClickEvent(){
    let dialogRef = this.dialog.open(ItemDialogComponent, {
      height: '400px',
      width: '600px'
    });
  }

这是我的 ItemDialog.html

    <div class="col-md-12">
  <br>
  <div>
    <table>
      <tr>
        <td>
          <label>{{itemName}}</label>
        </td>
      </tr>
      <tr>
        <td>
          <label >{{itemImageUrl}}</label>
        </td>
      </tr>

    </table>
    <button type="submit" (click)="viewDetails()">View Details</button>
    <br>
    <label></label>
  </div>
</div>

ItemDialog.component.ts

 export class ItemDialogComponent implements OnInit {
  @Input() item:any;

  constructor(sellItemService: SellItemService,@Inject(MAT_DIALOG_DATA) public data: any) {
  }
  ngOnInit() {
  }
}

因此，我想在单击“材料卡”时打开的对话框中使用 itemName 和其他项目数据。

Answer 1

试试这个代码。

html - 传递$eventitem 的对象，而不是传递

<div *ngIf="allItems" class="layout-row" >
<mat-card *ngFor="let item of allItems" class="flex-lg-20" (click)="OnMatCardClickEvent(item)">

  <mat-card-header class="flex-lg-20">
    <h2>{{item.itemName}}</h2>
    <br>
  </mat-card-header>
  <mat-card-content class="flex-lg-20">
    <h2>   </h2>
    <br>{{item.itemImageUrl}}
  </mat-card-content>

  <mat-card-content align="bottom" class="flex-lg-20">
    <div>Rs. {{item.itemPrice}}</div>

  </mat-card-content>
</mat-card><br><br><br>

BuyComponent.ts

@Component({
selector: 'app-buy',templateUrl: './buy.component.html',
styleUrls: ['./buy.component.css']
})
export class BuyComponent implements OnInit {

  constructor(private sellItemService: SellItemService,

              private dialog:MatDialog) {
  }

  areThereItems: boolean = false;
  allItems: DialogItem[] = [];



  ngOnInit() {
    this.showAllItemDialogs();
  }
//function with param item object
  OnMatCardClickEvent(item:any){
    let dialogRef = this.dialog.open(ItemDialogComponent, {
      height: '400px',
      width: '600px'
    });

    dialogRef.componentInstance.itemName = item.itemName;
 dialogRef.componentInstance.itemImageUrl = item.itemImageUrl;
  }

ItemDialog.component.ts

     export class ItemDialogComponent implements OnInit {
      @Input() item:any;

     public itemName: string;
public itemImageUrl: string;

      constructor(sellItemService: SellItemService,@Inject(MAT_DIALOG_DATA) public data: any) {
      }
      ngOnInit() {
      }
    }