Angular 4 вложенный шаблон ng и всплывающее окно ngbootstrap

Я пытаюсь включить данные из цикла ngFor во всплывающее окно. Я завернул всплывающее содержимое в шаблон ng и вложил его в цикл 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>

angular ng-bootstrap
person Eden WebStudio    schedule 11.10.2017    source источник
comment
можешь загрузить планкр? не зная структуры ваших данных, трудно узнать   -  person Alejandro Lora    schedule 12.10.2017
comment
Ваш пример работает для меня, если я возьму ваш *ngIf в даты событий (это неверно, так как вы захотите сравнить с фактическими датами вместо фильтров или использовать библиотеку для сравнения, например, в вашем component.ts). См. этот плункер plnkr.co/edit/16SQfJRui1Yy985iVgWf?p=preview   -  person Paul Ryan    schedule 12.10.2017
comment
Спасибо обоим. Всплывающее окно не работало из-за проблемы с импортом в файле ts. Теперь он работает, как вы говорите @PaulRyan. Рад принять ваш ответ, поскольку он привел меня к ошибке.   -  person Eden WebStudio    schedule 12.10.2017

Ответы (1)


arrow_upward
2
arrow_downward

Ваш пример работает для меня, если я возьму ваш *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

Для других, которые натыкаются на фильтры в * запросах, пока они технически функционируют, они могут иметь непреднамеренные результаты, поскольку они предназначены для рендеринга, а не для вычислений. Поэтому просто будьте осторожны с их использованием (например, они могут быть очень мощными, если их использовать для сравнения с выборкой вниз в массиве).

person Paul Ryan    schedule 11.10.2017