从 ngFor 在 angular 模态中获取自定义数据

Question

我是 Angular 的新手。我确信这是一个菜鸟问题，但我无法在任何地方找到答案，所以这里是：

从 API 中，我获得了一些包含多个项目的数据。我必须在仪表板中显示有关这些项目的信息。但是我也有一个用于每个项目的按钮，按下时必须显示该项目的 URL。

在 HTML 中，我正在做一个 ngFor，它非常适合为其他信息提供 html 模板。但我无法让它为模态工作。我想将自定义数据（从那个 ngFor）加载到模态

问题是模式模板位于 HTML 的最底部，因此原始 ngFor 的数据不再可用。

我所要做的就是让按钮有一个 ID。但是我如何使用该 ID 从 API?

获取信息？

HTML:

<div *ngFor="let project of projectData; index as i">
  <button
    type="submit"
    id="myModal"
    style="background-color: #f27704; padding: 0px"
    class="btn btn-sm ModalLaunch"
    data-id="{{ project.id }}"
    (click)="open(content)"
  >
    Launch modal
  </button>

  <!-- some other repeatable HTML here -->
</div>

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">URLs</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <!--        {{project.urls}}-->
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Close click')">Close</button>
    </div>
  </div>
</ng-template>

这是app.component.ts文件中的open函数

open(content) {
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
      result => {
        this.closeResult = `Closed with: ${result}`;
      },
      reason => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      }
    );
  }

我找不到将模态模板放置在 ngFor 中以使数据可用的方法。我知道我应该对内容做些什么，但我在哪里定义它以及如何将它提供给模式？

Answer 1

打开对话框时需要设置data属性

  /**
   *
   */
  opendialog(): void {
    const dialogRef = this.dialog.open(YourComponent, {
      width: '100%',
      // height: '1800',
      data: datatopass,
    });

然后您需要查看组件中的数据在构造函数中选取它

 constructor(
    @Optional() public dialogRef: MatDialogRef<TickertagsComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: typeofdatayoupassed,
    
  ) {}

然后您可以从数据中读取值属性

编辑：抱歉，这是针对 angular material 库的，请在此处找到 https://material.angular.io/components/dialog/overview

Answer 2

所以，现在可以使用了。我必须使用 JS 函数从按钮中获取元素 ID，然后将其传递给另一个函数，该函数在 API JSON 中搜索该元素 ID，然后使用 innerHTML 搜索 return 数据。感谢所有阅读和评论我的 post 的人！

从 ngFor 在 angular 模态中获取自定义数据

Getting custom data in angular modal from ngFor

javascript

angular

typescript

modal-dialog

ngfor