Angular 2: * ngFor cause Проблемы с CSS

Я создаю слайдер с эффектом покрытия, я использовал для него плагин jquery-flipster.Angular 2: * ngFor cause Проблемы с CSS

Я могу импортировать его и заставить его работать как демо, но когда я хочу сделать это динамически с директивой *ngFor, результатом будет простой список без эффекта покрытия.

Я сделал рабочую версию так:

<div id="coverflow"> 
     <ul class="flip-items"> 
      <li> 
       <img src="../../../img/text1.gif"> 
      </li> 
      <li> 
       <img src="../../../img/text2.gif"> 
      </li> 
      <li> 
       <img src="../../../img/text3.gif"> 
      </li> 
      <li> 
       <img src="../../../img/text4.gif"> 
      </li> 
      <li> 
       <img src="../../../img/text5.gif"> 
      </li> 
      <li> 
       <img src="../../../img/text6.gif"> 
      </li> 
     </ul> 
    </div>

Но с *ngFor директивы Я получил это:

what I got with ngFor

Код:

<div id="coverflow"> 
    <ul class="flip-items"> 
     <li *ngFor="let tab of tabs"> 
      <img [src]="tab.url"> 
     </li> 
    </ul> 
</div>

tabs является массив, где я храню все свои p ictures url (в файле JSON).

источник

2016-07-25 Rems

Когда вы начали инициализировать флипстер (например, вызов '$ ('. My-flipster'). Flipster();') Это было в вашем методе ngOnInit? Конструктор? Где-нибудь еще? – Pace

В последней строке вы имели в виду 'tabs' вместо' Tab', правильно? – acdcjunior

@Pace Я инициализирую свой флипстер в ngOninit, я думаю, что проблема исходит отсюда, он инициализирует флипстер, когда div «пуст», но я не знаю, как бы я мог работать вокруг этой проблемы. – Rems

Метод ngOnInit() слишком рано в жизненном цикле вызвать $('...').flipster() На этом этапе жизненного цикла в зависимости от компонента были введены, но DOM не сгенерированы так, когда вы звоните flipster() запрос она выдает вернет пустой и плагин ничего не может сделать.

Вы должны использовать метод жизненного цикла ngAfterViewInit(), который будет вызываться после того, как представление и контент будут настроены угловыми. Для обзора всех крючков взгляните на the docs.

Наконец, если ваш основной список будет меняться вообще, вам нужно будет уведомить плагин флипстера об изменении. Я не уверен, что это так просто, как вызвать $('...').flipster() или если вам нужно что-то еще, чтобы отслеживать изменения. Документы флипстера, похоже, не упоминают этот случай.

источник

2016-07-26 11:00:48 Pace

Спасибо! Проблема была связана с ngOnInit, и ее изменение noAfterViewInit разрешило проблему. – Rems

Angular 2: * ngFor cause Проблемы с CSS

ответ

Смежные вопросы