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

Question

我正在尝试显示来自对象数组的数据，我希望显示的值是 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 或其他东西，但我很迷茫该怎么做。以前可能使用过此插件的任何人都可能在实现此方面取得了一些成功。

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

标签： javascriptangularangular6

Answer 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() 将数据传递到模态

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>