4つのネストされたng-templateとngbootstrapのポップオーバー

Question

ngForループからのデータをポップオーバーに含めることを試みています。私はポップオーバーの内容をng-templateにラップし、これをngFOrのループの中にネストしました。私の問題は、データが画面に印刷されないことです。私はHTMLテキストのみを取得します。ここに私のコードです。どのように解決するのですか？

<ng-container *ngFor="let client of events.data.clients">  
        <div>  
        <div>    
         <div class="user__info"> 
          <span class="user__name">{{ client.first_name }}</span> 
         </div>    
        </div>  
        <ng-container *ngFor="let event of client.appointments">  
         <div *ngIf="(event.starts_at| date:'y-MM-dd') == (startofweek | date:'y-MM-dd')">      

     <ng-template #popContent> 
       <label>Notes</label> 
       <p>The id of client is {{ client.id }}</p> 
       <p>Event identifier {{ event.id }}</p>         
      </ng-template> 

     <button type="button" class="btn btn-outline-secondary" placement="bottom" 
[ngbPopover]="popContent" popoverTitle="Popover on bottom" > 
          Popover on bottom 
          </button> 


         </div> 

        </ng-container> 
        </div> 

     </ng-container> 

Answer 1

あなたの例では、私はイベントの日に、あなたの* ngIfを取るなら、私のために働いて（あなたは、実際の日付の代わりに、フィルタに比較したり、比較を行うためのライブラリを使用したいと思う、これは間違っている、例えばれますあなたのcomponent.tsに）。

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <ng-container *ngFor="let client of events.data.clients">  
     <div>  
     <div>    
      <div class="user__info"> 
       <span class="user__name">{{ client.first_name }}</span> 
      </div>    
     </div>  
     <ng-container *ngFor="let event of client.appointments">  
      <div>      

      <ng-template #popContent> 
      <label>Notes</label> 
       <p>The id of client is {{ client.id }}</p> 
       <p>Event identifier {{ event.id }}</p>         
      </ng-template> 

      <button type="button" class="btn btn-outline-secondary" placement="bottom" 
       [ngbPopover]="popContent" popoverTitle="Popover on bottom" > 
       Popover on bottom 
      </button> 
      </div> 

     </ng-container> 
     </div> 
    </ng-container> 
    `, 
}) 
export class App { 
    name:string; 
    startOfWeek = new Date('2017-11-30'); 
    events: any = { 
    data: { 
     clients: [ 
     { 
      id: 'blah', 
      first_name: 'Blah', 
      appointments: [ 
      { 
       id: '1234', 
       starts_at: new Date('2017-12-01T13:50:00Z') 
      } 
      ] 
     } 
     ] 
    } 
    } 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, NgbModule.forRoot() ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

彼らは技術的には彼らがいないレンダリング計算のためのものであるとして、彼らは意図しない結果を持つことができる機能している間*クエリにフィルタつまずく他の人のために、このplunker plnkr.co/edit/16SQfJRui1Yy985iVgWf?p=preview

を参照してください。だから、ちょうどそれらを使って慎重にしてください（例えば、配列上でのdownselectionとの比較のために使用されていると非常に強力です）。