无法在jQuery Carousal中显示动态数据

Question

我在棱角分明的应用程序中使用jquery轮播，如下图所示

下面是我的组件代码。

app.component.html文件

      <div>
          <div class="rs-carousel owl-carousel rs-navigation-2" data-loop="true" data-items="2" data-margin="30" data-autoplay="false" data-autoplay-timeout="5000" data-smart-speed="1200" data-dots="true" data-nav="true" data-nav-speed="false" data-mobile-device="1" data-mobile-device-nav="true" data-mobile-device-dots="true" data-ipad-device="2" data-ipad-device-nav="true" data-ipad-device-dots="true" data-md-device="2" data-md-device-nav="true" data-md-device-dots="true">
                 <div class="post-item" *ngFor="let post of posts">
                  <div class="post-id">
                        <p>{{post.id}}</p>
                  </div>
                  <div class="event-body">
                    <h4>{{post.title}}</h4>
                  </div>
              </div>
          </div>
      </div>

app.component.ts文件

import { Component, AfterViewInit } from '@angular/core';
import { Service } from './service';
declare let $: any;

export interface IPosts {
    userId: number;
    id:     number;
    title:  string;
    body:   string;
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  // public posts : IPosts;
  public posts: IPosts[] = [  <==== defined array
  {
     id: 1,
    title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
  },
  { 
    id: 2,
    title: 'qui est esse',
 },
 { 
   id: 3,
    title: 'ea molestias quasi exercitationem repellat qui ipsa sit aut',
},
];

constructor(public eventService: Service) {}

 public async ngOnInit(): Promise<void> {
    // this.posts  = await this.eventService.getEvents();
    console.log(this.posts);
  }

  ngAfterViewInit(){
   // Jquery code STARTS
    $('.rs-carousel').each(function () {
      var owlCarousel = $(this),
        loop = owlCarousel.data('loop'),
        items = owlCarousel.data('items'),
        margin = owlCarousel.data('margin'),
        stagePadding = owlCarousel.data('stage-padding'),
        autoplay = owlCarousel.data('autoplay'),
        autoplayTimeout = owlCarousel.data('autoplay-timeout'),
        smartSpeed = owlCarousel.data('smart-speed'),
        dots = owlCarousel.data('dots'),
        nav = owlCarousel.data('nav'),
        navSpeed = owlCarousel.data('nav-speed'),
        xsDevice = owlCarousel.data('mobile-device'),
        xsDeviceNav = owlCarousel.data('mobile-device-nav'),
        xsDeviceDots = owlCarousel.data('mobile-device-dots'),
        smDevice = owlCarousel.data('ipad-device'),
        smDeviceNav = owlCarousel.data('ipad-device-nav'),
        smDeviceDots = owlCarousel.data('ipad-device-dots'),
        mdDevice = owlCarousel.data('md-device'),
        mdDeviceNav = owlCarousel.data('md-device-nav'),
        mdDeviceDots = owlCarousel.data('md-device-dots');

      owlCarousel.owlCarousel({
        loop: (loop ? true : false),
        items: (items ? items : 4),
        lazyLoad: true,
        margin: (margin ? margin : 0),
        //stagePadding: (stagePadding ? stagePadding : 0),
        autoplay: (autoplay ? true : false),
        autoplayTimeout: (autoplayTimeout ? autoplayTimeout : 1000),
        smartSpeed: (smartSpeed ? smartSpeed : 250),
        dots: (dots ? true : false),
        nav: (nav ? true : false),
        navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
        navSpeed: (navSpeed ? true : false),
        responsiveClass: true,
        responsive: {
          0: {
            items: (xsDevice ? xsDevice : 1),
            nav: (xsDeviceNav ? true : false),
            dots: (xsDeviceDots ? true : false)
          },
          768: {
            items: (smDevice ? smDevice : 3),
            nav: (smDeviceNav ? true : false),
            dots: (smDeviceDots ? true : false)
          },
          992: {
            items: (mdDevice ? mdDevice : 4),
            nav: (mdDeviceNav ? true : false),
            dots: (mdDeviceDots ? true : false)
          }
        }
      });

    });

 // Jquery code ENDS

  }

}

现在carousal对于组件array(post[])文件中预定义的.ts可以很好地工作，但是如果我从api调用相同格式的数组，则无法显示在carousal

中

Stackblitz Link