bxslider无法在角度6中与* ngFor一起使用

Question

我在角度6和bxslider上比较新。它与数组工作正常，但我正在动态地使用* ngFor，它无法正常工作。如何为动态数据重新初始化。

使用数组正常工作

 <div class="bxslider">
     <div *ngFor="let slide of sliders"><img [src]="slide.url"></div>
</div> 

无法正常运行

 <div class="bxslider">
  <div *ngFor="let slide of banner_images"><img [src]="slide.data.image"></div>
 </div>

这些是component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { HomeHttpService } from 'src/app/shared/services/home/home- 
http.service';
declare var jquery:any;
declare var $ :any;
@Component({
selector: 'app-top-savers',
templateUrl: './top-savers.component.html',
styleUrls: ['./top-savers.component.css']
})
export class TopSaversComponent implements OnInit, AfterViewInit {

public banner_images: any[];

//static calling
public sliders : any[] = [
{"url":"image.jpg"},
{"url":"image.jpg"},
{"url":"image.jpg"},
{"url":"image.jpg"},
{"url":"image.jpg"}
   ];  

 constructor(private homeService:HomeHttpService) { }

 ngOnInit() {
    //fetching api data
    this.homeService.getBanner().subscribe((data) =>{   
    let banner = data[2]["objects"];
    this.banner_images = banner;
    //console.log(this.banner_images);
   });
  }

 ngAfterViewInit() {
   $('.bxslider').bxSlider({
     auto:true
   });
  }
 }

请找到下图 https://i.imgur.com/UUp6YFk.jpg

Answer 1

请将OnInit钩子更改为AfterViewInit。

import { Component, AfterViewInit} from "@angular/core";
declare var jquery:any;
declare var $ :any;
@Component({
  selector: "app-banner",
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css']
})
export class BannerComponent implements AfterViewInit {

  sliders = [
    {"url":"/images/image5.jpg"},
    {"url":"/images/image4.jpg"},
    {"url":"/images/image6.jpg"}
  ];

  constructor() {}

  ngAfterViewInit() {
    $('.slider').bxSlider({
      auto:true
    });

  }


}

Answer 2

尝试这种方式

sliders: any = []; // Declare 

<div *ngFor="let slide of sliders">
    <img [src]="slide.url" class="img-fluid">
</div>