不能在角度 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>
....