在結構指令中迭代數組對象

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)"指定靜態URL，它在<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%，這樣它就不會與模式框重疊。