如何在具有动态数据的javascript中创建多图片轮播？

问题描述

我正在尝试创建一个多图像轮播，其中从API中提取了图像。使用循环在dom中渲染图像。然后尝试通过该类访问图像并存储在“ slides”数组中。该API需要花费一些时间，因此“ slides”数组未初始化。

import { LightningElement,track } from 'lwc';

export default classCarousel extends LightningElement
{
    @track firstIndex = 1;
    @track lastIndex = 7;
    @track slides;
    @track Results;

    connectedCallback() {
        //EXTERNAL API CALLED FROM HERE
        this.ExternalApi();
    }

    showSlides(f,l) {
        console.log("show")

        this.slides = this.template.querySelectorAll('.nds-package-thumb'); // TRYING TO INITIALIZE SLIDES ARRAY BY ACCESSING THE CLASS OF THE RENDERED IMAGES,HERE IS THE ISSUE,THIS GETS INITIALIZED FirsT AND ARRAY GETS RENDERED LATER
        console.log(this.slides.length)
        console.log(this.slides)
        console.log(f,l)
        let i;
        let j;
        let k;


        if (f < 1) {

            for (i = 0; i < 7; i++) {
                this.slides[i].style.display = "inline-block";
            }

        }
        if (l < this.slides.length + 1) {
            console.log("called else")
            for (i = f - 1; i < l; i++) {
                this.slides[i].style.display = "inline-block";
                console.log("first loop")

            }
            for (j = l; j < slides.length; j++) {
                this.slides[j].style.display = "none";
                console.log("second loop")

            }
            if (f > 1 && f < 7) {
                for (k = 0; k < f - 1; k++) {
                    this.slides[k].style.display = "none";
                    console.log("third loop")
                }
            }
        }
    }

    externalApi() {

        const params = {
            input: JSON.stringify({ "Category": "Signature" }),sClassName: 'Controller',sMethodName: 'getContentByCategory',options: '{}'
        };
        this._actionClass
            .executeAction(params,null,this,null)
            .then(response => {
                let parsedResponse = JSON.parse(response.result.CategoryDetailList);
                this.Results = parsedResponse;           //IMAGES GETTING RENDERED IN HTML FROM RESULTS ARRAY
                console.log(parsedResponse);


                this.showSlides(this.firstIndex,this.lastIndex); //SHOW FUNCTION CALLED  
            })
            .catch(error => {
                console.log(error);
            });
    }
}

试图应用异步等待，但没有解决方案。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）