Angular Material 对话框：有没有办法在模板中不将数据属性用作 "data.*"？

Question

我有一个如下所示的模板：

card.component.html

<mat-card class="mat-elevation-z4">
  <img mat-card-image src="{{ item.media_url }}" />
  <mat-card-content class="custom">
    <p>{{ item.caption }}</p>
  </mat-card-content>
</mat-card>

它是一个在父视图中使用的 Material 卡片，它创建一个包含卡片的网格，每个卡片都有特定的 item.media_url 和 item.caption

events.component.ts

<div class="content">
  <div fxLayout="row wrap" fxLayoutGap="16px grid">
    <div
      fxFlex="25%"
      fxFlex.md="33%"
      fxFlex.sm="50%"
      fxFlex.xs="100%"
      *ngFor="let item of events"
    >
      <app-card  [item]="item" #myCard></app-card>
      <button mat-button (click)="openDialog(myCard)">SCOPRI DI PIU'</button>
    </div>
  </div>
</div>

如您所见，在 ngFor 循环中，每张卡片下方都有一个按钮，用于打开一个对话框，一次只显示一张卡片（网格中单击按钮上方的那个） ).

我想在这个对话框中放入与 item.media_url 和 item.caption 完全相同的卡片，所以我想使用 the data property of MatDialog 来做到这一点。

card.component.ts

import { Component, OnInit, Input, Inject, Optional } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

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

  @Input() item : any;
  constructor(@Optional() @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit(): void {
  }

}

events.component.ts

import { Component, OnInit } from '@angular/core';
import { EventsService } from '../../shared/services/events.service';
import { MatDialog } from '@angular/material/dialog';
import { CardComponent } from 'src/app/shared/card/card.component';

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

  constructor(private eventsService: EventsService, public dialog: MatDialog) {}

  ngOnInit(): void {
    this.getEvents();
  }

  getEvents(): void {
    this.eventsService.getEvents().subscribe((response: any) => {
      this.events = response.data;
      console.log(this.events);
    });
  }

  openDialog(card: any) {
    this.dialog.open(CardComponent, {
      data: {
        item: card,
      },
    });
  }
}

但是，当我这样做时，我需要将 data 传递给 this.dialog.open()，而不是 item，也不是 card。

现在我收到错误 ERROR TypeError: ctx.item is undefined（我完全理解我收到的原因）。

有没有什么方法可以将 data“别名”为 item，或者更好的方法？

Answer 1

您问题下的 Robert 评论回答了模板/组件部分。
至于数据别名问题，答案是否定的。 data 是 MatDialogConfig class 的属性，如图 here 所示，据我所知，您无法更改它。

Answer 2

为了让它发挥作用，我们做了以下工作：

  openDialog(card: CardComponent) { <-- strongly type
    console.log(card.item); <-- access item
    this.dialog.open(CardComponent, {
      data: {
        item: card.item <-- pass it as param
      }
    });
  }

card.component.ts 中的下一步设置“项目”属性。

  constructor(@Optional() @Inject(MAT_DIALOG_DATA) public data: any) {
    if (data) { <-- only if data is injected
      this.item = data.item; <-- set item
    }
  }

工作Stackblitz

Angular Material 对话框：有没有办法在模板中不将数据属性用作 "data.*"？

Angular Material dialog: is there a way not to use the data property as "data.*" in the template?

javascript

modal-dialog