无法在角度7上动态使用光滑轮播

Question

当我对静态数据使用轮播时，效果很好。下面是使用静态图片轮播的代码

         <div class="row">
              <h2 class="text-uppercase fs-20px text-strong">Category</h2>

              <div class="wrapperr">
                  <div class="carousell">
                    <img src="http://placehold.it/350x300?text=1"></div>
                    <img src="http://placehold.it/350x300?text=2"></div>
                    <img src="http://placehold.it/350x300?text=3"></div>
                    <img src="http://placehold.it/350x300?text=4"></div>
                    <img src="http://placehold.it/350x300?text=5"></div>
                    <img src="http://placehold.it/350x300?text=6"></div>
                </div>
              </div>

          </div> 

但是当我尝试使用动态图像数据时，轮播无法正常工作。代码在下面

<div class="row">
              <h2 class="text-uppercase fs-20px text-strong">Category</h2>

              <div class="wrapperr">
                  <div class="carousell">
                    <div class="slider">
                    <div *ngFor="let category of categories">
                      <img [src]="sanitizer.bypassSecurityTrustUrl(category.image == '' ||category.image == null || category.image === undefined ? globals.defaultThumbnail : category.image)">
                    </div>

                  </div>
                </div>
              </div>

          </div>

.ts文件代码

 $(document).ready(function(){
      $('.carousell').slick({
      slidesToShow: 2.25,
      // dots:true,
      centerMode: false,
      infinite: false,
      });
      });

Answer 1

请这样更改您的html

.....
<div class="carousell">
    <ng-template *ngFor="let category of categories">
        <img [src]="sanitizer.bypassSecurityTrustUrl(category.image == '' ||category.image == null || category.image === undefined ? globals.defaultThumbnail : category.image)">
    </ng-template>
</div>
....