Question

我试图在popover中包含来自ngFor循环的数据。我已将popover内容包装到ng-template中并将其嵌套在ngFOr循环中。我的问题是数据没有打印到屏幕上。我只收到HTML文本。这是我的代码。我该如何解决？

XMLHttpRequest

Answer 1

如果我在事件日期取出您的* ngIf，那么您的示例对我有用（这是不正确的，因为您需要与实际日期进行比较而不是过滤器或使用库进行比较，例如在您的组件中。 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 Iterator

对于其他偶然发现*查询中的过滤器而在技术上起作用的人，他们可能会产生意想不到的结果，因为它们不用于渲染而不是计算。所以只需要小心使用它们（例如，如果用于比较数组中的downselection，它们可能非常强大。）

Angular 4嵌套ng-template和ngbootstrap popover

1 个答案: