введите здесь описание изображенияКомпонент:

<aura:component controller="COVID19" implements="flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable">

    <aura:attribute type="CCOVID19WRAPPER[]" name="COVIDLIst" />
    <aura:attribute type="List" name="MyColoumns" />
    <aura:attribute type="boolean" name="ShowSpinner" default="false"/>
    <aura:Handler name="init" value="{!this}" action="{!c.init}"/>


        <lightning:datatable data="{!v.COVIDLIst}" coloumns="{!v.MyColoumns}" keyField="id" >

        </lightning:datatable>


     </aura:component>

Контроллер:

({
    init : function(comp, event, helper) {

        comp.set('v.MyColoumns',[
            {label:'Country',fieldName:'Country',Sortable:true,type:'text'},
            {label:'New Confirmed',fieldName:'NewConfirmed',Sortable:true,type:'text'},
             {label:'Total Confirmed',fieldName:'TotalConfirmed',Sortable:true,type:'text'},
             {label:'Total Death',fieldName:'TotalDeaths',Sortable:true,type:'text'},
             {label:'New Death',fieldName:'newDeaths',Sortable:true,type:'text'},
             {label:'New Recovered',fieldName:'NewRecovered',Sortable:true,type:'text'},
             {label:'Total Recovered',fieldName:'TotalRecovered',Sortable:true,type:'text'}          

           ]);

        var action=comp.get("c.getCOVID19Method");
        action.setParams({});

        action.setCallback(this, function(response)
        {

            var state=response.getState();
            if(state=="SUCCESS")
           {
               comp.set("v.COVIDLIst",response.getReturnValue());

           }

         });

         $A.enqueueAction(action);

    }
})

Класс Apex:

        public class COVID19
          {
            @AuraEnabled
           public static list<CCOVID19WRAPPER> getCOVID19Method()
             {
             list<CCOVID19WRAPPER> listWrap= new list<CCOVID19WRAPPER>();
           String endPont='https://api.covid19api.com/summary';
       http ht= new http();
       HttpRequest httReq= new HttpRequest();
       httReq.setHeader('Content-Type','application/json');
       httReq.setMethod('GET');
       httReq.setEndpoint(endPont);
       HttpResponse httRes=ht.send(httReq);
       system.debug('response-->'+httRes.getBody());

       JSONParser jparse=JSON.createParser(httRes.getBody());
       while(jparse.nextToken()!=null)
       {
           if(jparse.getCurrentToken()==JSONtoken.START_ARRAY)
           {
                while(jparse.nextToken()!=null)
                   {
                       if(jparse.getCurrentToken()==JSONtoken.START_OBJECT)
                       {
                               CCOVID19WRAPPER cv=(CCOVID19WRAPPER)jparse.readValueAs(CCOVID19WRAPPER.class);
               if(String.isNotBLANK(cv.Country))
               {
                   listWrap.add(cv);
               }
                       }
                   }
           }
       }
       system.debug('wrapper-->'+listWrap);
       return listWrap;

   }


 public class CCOVID19WRAPPER{
    @AuraEnabled
    public string Country;

     @AuraEnabled
    public string CountrySlug;

     @AuraEnabled
    public Integer NewConfirmed;

     @AuraEnabled
    public Integer TotalConfirmed;

     @AuraEnabled
    public Integer newDeaths;

     @AuraEnabled
    public Integer TotalDeaths;

     @AuraEnabled
    public Integer NewRecovered;

    @AuraEnabled
    public Integer TotalRecovered;

}   


}

Когда я вижу предварительный просмотр этого компонента, появляется пустой экран. В идеале он должен отображать данные из результата API COVID19. Невозможно отследить пропажу.

0
Suren 30 Мар 2020 в 16:18

1 ответ

В вашем коде есть ряд опечаток. Примечательно, что JavaScript и Lightning относятся к CASE-SEnSiTiVe. Это означает, что aura:Handler должно быть aura:handler, Sortable должно быть sortable, newDeaths должно быть NewDeaths и т. д. Вам необходимо просмотреть свой код. чтобы найти любые другие символы, которые являются неправильными. Проверьте документацию, если вы не уверены. У вас также есть некоторые орфографические ошибки. coloumns должно быть columns. Это определенно препятствует правильному отображению данных. Кроме того, тип вывода должен быть исправлен; числовые поля не отображаются при использовании типа данных type:'text'.

Кроме того, вам не нужен Apex в современных компонентах. Просто установите доверенный сайт CSP, и вы сможете вызывать службу напрямую. Вот рабочий пример, который я собрал из вашего исходного сообщения:

<aura:application extends="force:slds">
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <aura:attribute name="data" type="List" default="[]" />
    <aura:attribute name="myColumns" type="List" default="[]" />

    <lightning:datatable data="{!v.data}" columns="{!v.myColumns}" keyField="Id" />
</aura:application>

({
    init: function(component, event, helper) {
        component.set('v.myColumns',[
            {label:'Country',fieldName:'Country',sortable:true,type:'text'},
            {label:'New Confirmed',fieldName:'NewConfirmed',sortable:true,type:'number'},
            {label:'Total Confirmed',fieldName:'TotalConfirmed',sortable:true,type:'number'},
            {label:'Total Death',fieldName:'TotalDeaths',sortable:true,type:'number'},
            {label:'New Death',fieldName:'NewDeaths',sortable:true,type:'number'},
            {label:'New Recovered',fieldName:'NewRecovered',sortable:true,type:'number'},
            {label:'Total Recovered',fieldName:'TotalRecovered',sortable:true,type:'number'}          

        ]);

        let xhr = new XMLHttpRequest();
        xhr.open(
            'GET', 
            'https://api.covid19api.com/summary'
        );
        xhr.addEventListener(
            'load', 
            $A.getCallback(function() {
                let results = JSON.parse(xhr.response);
                results = results.Countries.filter(function(record) {
                    return !!record.Country;
                });
                results = results.map(function(result, index) {
                    result.Id = ''+index;
                    return result;
                });
                component.set("v.data", results)
            })
        );
        xhr.addEventListener(
            'error',
            function() {
                console.log('failed to load resource')
            }
        );
        xhr.send(null);
    }
})

(Примечание: сортировка и т. д. не были реализованы, это предназначено только для демонстрации необходимых исправлений из вашего текущего источника)

3
sfdcfox 30 Мар 2020 в 16:40
Спасибо. Получил проблему. Использовал столбцы, это должны быть столбцы. Также исправлены другие опечатки. Спасибо за уведомление :)
 – 
Suren
30 Мар 2020 в 16:51
Sfdcfox.Но я не могу видеть данные в таблице???
 – 
SFDCLearner
30 Мар 2020 в 16:51
Я вижу, что все данные работают на меня.
 – 
Suren
30 Мар 2020 в 16:52
Здорово! Рад, что смог помочь.
 – 
sfdcfox
30 Мар 2020 в 16:52
Я не могу видеть данные и дважды скопировал код. console.log я вижу: не удалось загрузить ресурс .. не могли бы вы помочь мне в этом .. учиться на вашем коде
 – 
SFDCLearner
30 Мар 2020 в 17:01