如何使用 ngx-smart-modal angular 6 通过 ngFor 循环显示对象数据？答案

【问题标题】：How to display object data via ngFor loop using ngx-smart-modal angular 6?如何使用 ngx-smart-modal angular 6 通过 ngFor 循环显示对象数据？
【发布时间】：2019-07-08 18:47:24
【问题描述】：

我正在尝试显示来自对象数组的数据，我希望显示的值是 s.video_embed - 它显示了特定播放器的精彩片段。

我正在使用一个名为“ngx-smart-modal”的模态插件，并在 *ngFor 循环内部（对象数组称为“squad”，我正在尝试显示嵌入 iframe 中的视频的 url，这是在这个模态里。

我感到困惑的是，模式打开时会显示数组中最后一个对象的详细信息。每次。而不是小队中每个球员的特定视频。

squad.component.ts 中没什么可看的（但如果需要，很乐意分享，但这是我的模板代码：

<article *ngFor="let s of squad; let i = index;" class="profile-card">
  <ng-container *ngFor="let c of config;">
    <img *ngIf="'s.avatar.data.'" class="avatar" [src]="'https://some_url.co.uk' + s.avatar.data.url" alt="profile image">
    <h5 [style.color]="'#' + c.header_colour.data.hex_code" [style.text-transform]="c.header_text_case.data.text_case">{{ s.name }}</h5>
    <h5 [style.color]="'#' + c.header_colour.data.hex_code" [style.text-transform]="c.header_text_case.data.text_case">{{ s.field_position.data.position }}</h5>
    <ul>
      <li>Height: {{ s.height }}</li>
      <li>Age: {{ s.age}}</li>
      <li>Appearances: {{ s.caps }}</li>
      <li>Goals: {{ s.goals }}</li>
      <li>SquadNumber: {{ s.squad_number }}</li>
      <li>Nationality:
        <div class="img-thumbnail flag flag-icon-background" [ngClass]="s.nationality.data.flag_class"></div>
      </li>
    </ul>
<--- modal stuff that I'm confused about start--->
    <button *ngFor="let c of config;" (click)="ngxSmartModalService.getModal('videoModal').open()">
      <i class="fab fa-youtube"></i> Video Highlights
    </button>
    <ngx-smart-modal #videoModal identifier="videoModal" customClass="medium-modal">
        <h1>{{ s.name }}</h1>
        <h5 [style.color]="'#' + c.header_colour.data.hex_code" [style.text-transform]="c.header_text_case.data.text_case">{{ s.field_position.data.position }}</h5>
        <iframe width="100%" height="720" [src]="s.video_embed | safe" frameborder="0" allowfullscreen></iframe>
        <button class="button -dark" (click)="videoModal.close()">Close</button>
    </ngx-smart-modal>
<--- modal stuff that I'm confused about end--->
  </ng-container>

我想我需要在这里添加一个 id 或其他东西，但我不知道该怎么做。以前可能使用过此插件的任何人都可能在实现此方面取得了一些成功。

任何关于为什么会发生这种情况的建议，将不胜感激。

【问题讨论】：

标签： javascript angular angular6

【解决方案1】：

你的代码有很多错误

1- 您正在创建多个具有相同#reference 和标识符的 ngx-smart-modal。

这意味着你在 *ngFor 循环中使用了 ngx-smart-modal

<article *ngFor="let s of squad; let i = index;" class="profile-card">
<ng-container *ngFor="let c of config;">
      <--More Code here->
<ngx-smart-modal #videoModal identifier="videoModal" customClass="medium-modal">
      <--More Code here->
</ng-container>
</article>

它将创建不允许的同一模态的多个实例。

解决方案：- 将 ngx-smart-modal 放在循环之外通过 setModalData() 将数据传递给 modal

this.ngxSmartModalService.setModalData(data, 'videoModal');
this.ngxSmartModalService.getModal('videoModal').open();

通过videoModal.getData()获取数据到模板中

<ngx-smart-modal #videoModal identifier="videoModal" customClass="medium-modal">
        <div *ngIf="imageModal.getData() as data">
        <h1>{{ data.name }}</h1>
        <h5 [style.color]="'#' + c.header_colour.data.hex_code" [style.text-transform]="c.header_text_case.data.text_case">{{ data.field_position.data.position }}</h5>
        <iframe width="100%" height="720" [src]="data.video_embed | safe" frameborder="0" allowfullscreen></iframe>
        </div>
        <button class="button -dark" (click)="videoModal.close()">Close</button>
 </ngx-smart-modal>

【讨论】：