Question

我正在使用这种手风琴。

<ngb-accordion [closeOthers]="true" activeIds="static-0">
  <ngb-panel id="static-{{i}}" title="{{panel.title}}" *ngFor="let panel of (panels | search:'panel,content':query);let i = index;">
    <ng-template ngbPanelContent>
      <div class="row"><div class="col col-9">{{panel.content}}</div> <div class="col col-3"><figure (click)="open(modalId)"><img [src]="panel.imgsrc"></figure></div></div>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

当我点击figure并且对应的panel.imgsrc缩放时，我想要做的是打开一个模态。对于模态，我使用它。

<ng-template #modalId let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <figure><img src="assets/img/unidade1.png"></figure>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

模态有效，但前提是我在(click)="open(modalId)"中指定了一个静态网址，并且它与<ng-template #modalId完全匹配。

我尝试使用#{{modalID}}但它不会打开;它不会显示控制台错误，但可能是插值错误。

我还考虑了逆向工程ng-template并改变了它绑定模态ID的方式，所以我可以用适当的符号迭代数组对象，但我不知道它在哪里是模板或者在哪里他们建立了指令（无论如何，这可能是一种更简单的方法）。

我感谢任何帮助，提前谢谢。

Answer 1

我不知道为什么我之前没有尝试过，但解决方案非常简单。

<ngb-accordion [closeOthers]="true" activeIds="static-0">
  <ngb-panel id="static-{{i}}" title="{{panel.title}}" *ngFor="let panel of (panels | search:'panel,content':query);let i = index;">
    <ng-template ngbPanelContent>
      <div class="row"><div class="col col-9">{{panel.content}}</div> <div class="col col-3"><figure (click)="open(modal)"><img [src]="panel.imgsrc"></figure></div></div>

      <ng-template #modal let-c="close" let-d="dismiss">
        <div class="modal-header">
          <h4 class="modal-title">Modal title</h4>
          <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <figure><img [src]="panel.imgsrc"></figure>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
        </div>
      </ng-template>

    </ng-template>
  </ngb-panel>
</ngb-accordion>

我还需要迭代模态中的img标记，id也应该是相同的，因为它也是循环的。如果有人这样做，我建议将figure img设置为max-width:100%样式，这样它就不会与模态框重叠。

在结构指令中迭代数组对象

1 个答案: