Я получаю список изображений вместо отображения в формате сетки - PullRequest
Новая
       37

Я получаю список изображений вместо отображения в формате сетки

2 голосов
/ 14 октября 2019

Я новичок в Salesforce, я не могу сформировать сетку с изображениями из URL-адресов, которые я дал в своем классе Apex, используя JSON, они возвращают представление списка вместо результатов рядом друг с другом.

Любая помощь будет оценена.

Компонент: 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="pic_ctrl">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="urls" type="String" />

    <!--  data: {!v.urls}  -->
    <aura:iteration items="{!v.urls}" var="row">
        <div class="slds-grid  slds-wrap"  style="height: 203px; width:400px ; background-color:white;" onclick="{!c.showcarousel}" >
            <div class="slds-col slds-size_1-of-2">
                <img src="{!row}"  style="height: 200px; width:400px ; background-color:white;"/>
            </div>
        </div>
    </aura:iteration>
</aura:component>

Controller.js: 

({ 
    doInit : function(component, event, helper) {
        var getdata = component.get("c.geturl");
        var h = [];
        getdata.setCallback(this, function(response){      
            var state = response.getState();
            if (state === 'SUCCESS'){
                var Result = response.getReturnValue();
                console.log("enter" + Result);
                // console.log('1'+JSON.parse(result));
                //var finalJson = JSON.parse(finalJson1);
                var len=Result.length;
                console.log("final length" + Result.length);
                for(var i=0; i<len; i++){
                    console.log (Result[i]["imageURL"]); 
                    h.push(Result[i]["imageURL"]);
                }
                console.log("test-->"+h);
                component.set("v.urls",h);
                console.log("caught");
            }
        });
        $A.enqueueAction(getdata);      
}

Класс Apex: 

public class pic_ctrl {
    @AuraEnabled
    public static Object geturl() {
        String ImgJson = ' [        {"imageName": "Mice1.jpg","imageId": "101", "imageURL": "https://labpulse.s3.amazonaws.com/images/images1.jpg", "imageDescription": "Some description" },{"imageName": "Mice2.jpg","imageId": "101", "imageURL": "https://labpulse.s3.amazonaws.com/images/images2.jpg", "imageDescription": "Some description" },' +
   '{ "imageName": "Mice3.jpg","imageId": "102",  "imageURL": "https://labpulse.s3.amazonaws.com/images/images3.jpg", "imageDescription": "Some description" }, {"imageName": "Mice4.jpg", "imageId": "103", "imageURL": "https://labpulse.s3.amazonaws.com/images/images4.jpg",  "imageDescription": "Some description" }]';

        Object Finaljson= JSON.deserializeUntyped(ImgJson); 

        return Finaljson;
    } 
}

1 Ответ

1 голос
/ 16 октября 2019

Как указано в этом ответе , лучше использовать <lightning:layout> для таких ситуаций, как slds-grid с aura: итерацию сложно выполнить, например, ваш компонент просто повторяет div slds-grid содин столбец для каждого изображения. Если вы хотите, чтобы он работал с slds-grid, вам нужно было бы перебирать изображения в группах по 2, чтобы вашим атрибутом должен был быть двумерный массив ваших изображений. В качестве альтернативы, вы можете добавить пользовательские плавающие элементы CSS и избавиться от класса столбца slds-col. Надеюсь, это поможет

...