Angular 8和ngx-slick-carousel加载问题

如何解决Angular 8和ngx-slick-carousel加载问题

我正在尝试使用轮播实现搜索结果，但是第二次执行搜索时，轮播会中断。

第一次执行的过程如下：

这是我第二次按下搜索按钮时

这是我的配置：

slideConfiguracao = {
    "rows": 2,"slidesToShow": 3,"slidesToScroll": 3,"prevArrow": '<button class="slick-prev slick-arrow" style="display: flex;"><i class="material-icons">arrow_back</i></button>',"nextArrow": '<button class="slick-next slick-arrow" style="display: flex;" aria-disabled="false"><i class="material-icons">arrow_forward</i></button>',"dots": true,"infinite": false
};

这是我的搜索功能：

this.myApi.searchMethod(name,tipo).subscribe(data => this.searchArray = data);

这是我的模板：

<ngx-slick-carousel #slickModal="slick-carousel"
    [config]="slideConfiguracao">
  <ng-template ngFor let-p [ngForOf]="pessoas">
    <div ngxSlickItem>
      <div class="block--card" (click)="navigatetoProfile(p.id)">
        <div class="card-thumb">
          <div [ngSwitch]="p.tipo">
            <span *ngSwitchCase="'m'" class="badge associado associado--laranja"><i
                class="material-icons">star_rate</i></span>
            <span *ngSwitchCase="'m'" class="badge morador"><i class="material-icons">home</i></span>
            <span *ngSwitchCase="'a'" class="badge familiar"><i class="material-icons">people</i></span>
            <span *ngSwitchCase="'f'" class="badge prestador"><i class="material-icons">build</i></span>
            <span *ngSwitchCase="'p'" class="badge prestador"><i class="material-icons">build</i></span>
          </div>
          <img src="{{url_servidor}}{{p.url}}" class="img-fluid">
          <span class="code">{{p.codigo}}</span>
        </div>
        <div class="card-body">
          <p class="name">{{ p.nome }}</p>
          <p *ngIf="p.quadra">QD {{p.quadra}} LT {{p.lote}}
            ({{p.situacao_imovel}}) <br>{{p.logradouro}}</p>
        </div>
      </div>
    </div> 
  </ng-template>
</ngx-slick-carousel>

我试图打开组件并调用initSlick，但没有成功，我也尝试延迟数据设置，也没有成功。

有人知道发生了什么事吗？

编辑：通过控制台日志，我可以验证数据是否完整。