1

我的项目本质上是在屏幕上显示一堆框。本质上，每个框都有一个按钮，单击该按钮会将您链接到另一个页面。这是盒子对象。

export interface Allbox {
    image: string, 
    link: string, 
    button_name: string, 
    info: string; 
    description: string;
}

{image: 'assets/image.png', link: 'link1.com',
    button_name: 'B1', info: 'assets/mat-info2.png', description: `this is the description.`
    },

    {image: 'assets/image.png', link: 'link2.com',
    button_name: 'B2', info: 'assets/mat-info2.png', description: `Some more displaying material.`
    },

    {image: 'assets/image.png', link: 'link3.com',
    button_name: 'B3', info: 'assets/mat-info2.png', description: `What I want displayed.`
    },
}

它们以 HTML 格式生成，如下所示：

<mat-card id="CARDBOX" *ngFor="let box of allbox">
                    <img class="logoy" src="{{box.image}}" height=35px>
                    <a href="{{box.link}}" class="button" target="_blank">{{box.button_name}}</a>
                    <input type="image" id="info" title="Click for description" src="{{box.info}}" (click)="openDialog()" height=20px/>
 </mat-card>

我希望能够单击一个图标并显示该框的描述 - 通过 mat-dialog。问题出在我的 openDialog() 函数中。我试图在单击时打开并显示每个框的描述。这是 TS 中的标准 mat-dialog：

constructor(public dialog: MatDialog) { }

  ngOnInit() {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogBox, {
      width: '400px',
      height: '600px'
    });
  }

  openSomethingElse(): void {
    
  }
}

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.scss']
})

export class DialogBox {

  allbox = ALLBOX;

  constructor(public dialogRef: MatDialogRef<DialogBox>) {}

  onNoClick(): void {
    this.dialogRef.close()
  }
}

<title mat-dialog-title></title>
<div mat-dialog-content *ngFor="let box of allbox">
    {{box.description}}
</div>
<div mat-dialog-action>
    <button mat-button (click)="onNoClick()">Close</button>
</div>

问题是 mat-dialog 正在完美地生成，但它列出了每一个描述，而不仅仅是我正在寻找的描述。

我看到了问题，因为 ngFor 将附加列表中每个项目的描述。我怎样才能使它只有适当对象的相应描述？

我考虑在 TS 中制作某种 If 语句结构，同时为每个对象制作单独的对话框，但我不确定它是如何工作的。

让我的对象描述显示在 mat-dialog 中而不一次显示所有描述的最佳方法是什么？我知道这很多，所以请随时提出后续问题。

4

2 回答 2

1

你的DialogBox类被初始化为ALLBOX. 在不看它是如何初始化的情况下，我假设这个值包含所有框定义，并且您正在循环遍历每个框并将它们显示在模板中。

材质对话框允许您将数据注入正在打开的对话框中。请参阅此处的对话框示例并查看Injecting data when opening a dialog示例。

有了这个，您可以将要显示的数据注入对话框中。

我的建议是，不要让你DialogBox持有对每个定义的引用，而是使用注入来传递你希望在打开对话框时显示的特定框。IE

this.dialog.open(DialogBox, {
  data: selectedBox
})

这selectedBox将是您想要在对话框打开时显示的当前框。

在您的 中DialogBox，您需要将数据注入其中。这是通过将您的构造函数更新为

constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}

这样，您的 DialogBox 组件可以显示data注入其中的内容。

这使您的对话框保持通用和简单，并将责任放在打开对话框的进程上，以传递应显示的信息。

祝你好运。

于 2020-11-03T00:52:06.187 回答
1

将数据传递给对话框：

您app-dialog应该在构造函数中接收数据：

export class DialogBox {
....
  constructor(public dialogRef: MatDialogRef<DialogBox>,
      @Inject(MAT_DIALOG_DATA) public data: Allbox) {}
  
....
}

对话框有一个box可用的数据，因此很容易只显示传入的描述：

<title mat-dialog-title></title>
<div mat-dialog-content>
    {{data.description}}
</div>
<div mat-dialog-action>
    <button mat-button (click)="onNoClick()">Close</button>
</div>

在您的父组件中，将参数添加到openDialog方法并将其作为数据传递给对话框：

openDialog(box: Allbox): void {
    const dialogRef = this.dialog.open(DialogBox, {
      data: box,
      width: '400px',
      height: '600px'
    });
  }

最后在 HTML 中：

<mat-card id="CARDBOX" *ngFor="let box of allbox">
  <img class="logoy" src="{{box.image}}" height=35px>
  <a href="{{box.link}}" class="button" target="_blank">{{box.button_name}}</a>
   <input type="image" id="info" title="Click for description" src="{{box.info}}"
        (click)="openDialog(box)" height=20px />
</mat-card>
于 2020-11-03T00:52:18.743 回答