Angular 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 {}

看到这个笨蛋plnkr.co/edit/16SQfJRui1Yy985iVgWf?p=preview

对于其他在技术上运行时偶然发现 * 查询中的过滤器的人来说，它们可能会产生意想不到的结果，因为它们用于渲染而不是计算。所以请小心使用它们（例如，如果用于与数组上的向下选择进行比较，它们会非常强大）。

Angular 4 个嵌套的 ng-template 和 ngbootstrap 弹出框

Angular 4 nested ng-template and ngbootstrap popover

ng-bootstrap

angular