Question

我无法将参数boatTypeId传递给助手类BoatSearchResultsHelper.js。我在完成Lightning组件框架专家superbadge中指定的挑战3时遇到以下错误。不知道我无法抓住遗漏点。请建议。

以下是代码片段：

<!--BoatSearchResults.cmp-->
<aura:component controller="BoatSearchResults" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="boats" type="Boat__c[]"/> 
    <!-- set up the aura:method for search -->
    <aura:method name="search" action="{!c.search}">
        <aura:attribute name="boatTypeId" type="String"/>
    </aura:method>
    <div class='slds-m-around_medium'>
        <lightning:layout horizontalAlign="center" verticalAlign="center" multipleRows='true'>

            <aura:if isTrue="{!v.boats.length > 0}">
                <aura:iteration items="{!v.boats}" var="bot">
                    <lightning:layoutItem flexibility="grow" class="slds-m-around_small">
                        <c:BoatTile boat="{!bot}" />
                    </lightning:layoutItem>
                </aura:iteration>
                <aura:set attribute="else">
                    <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                        <ui:outputText value="No boats found" />
                    </lightning:layoutItem>
                </aura:set>
            </aura:if> 
        </lightning:layout>
    </div>
</aura:component>

//BoatSearchResultsController.js
({
    search: function(component, event, helper){ 
        var params = event.getParam('arguments'); 
        alert(params.boatTypeId); //<---getting proper value
        alert(component.set("v.boatTypeId", params.boatTypeId)); //<---here I am getting undefined
        var a = component.get('c.doSearch');
        $A.enqueueAction(a); 
    }, 
    doSearch : function (component, event, helper){ 
        alert(component.get("v.boatTypeId")); //<---here I am getting undefined
        helper.onSearch(component); //calling helper method
    },
})


//BoatSearchResultsHelper.js
({
    onSearch : function(component, event) {
        var boatTypId = component.get("v.boatTypeId");
        alert(boatTypId); //<---here I am getting undefined
        console.log("boatTypId--> " + boatTypId);
        var action = component.get("c.getBoats");
        action.setParams({boatTypeId:boatTypId});

        //add the callback behavior for when the response is received
        action.setCallback(this, function(response){
            var state = response.getState();
            console.log("state " + state);
            if(state === "SUCCESS"){
                var res = response.getReturnValue();
                component.set("v.boats", res);
                //console.log("v.boats ->"+ JSON.stringify(res));
            }
            else{
                console.log("Failed with state: " + state);   
            }
        });

        //send action off to be executed
        $A.enqueueAction(action);
    },
})

Answer 1

我已经弄清楚问题是什么。

只需在下面添加另一个属性<aura:attribute name="boatTypeId" type="String"/>即可 <aura:method name="search" action="{!c.search}"> <aura:attribute name="boatTypeId" type="String"/> </aura:method>

因此，BoatSearchResults.cmp的最终标记是：

<!--BoatSearchResults.cmp-->
<aura:component controller="BoatSearchResults" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="boats" type="Boat__c[]"/> 
    <!-- set up the aura:method for search -->
    <aura:method name="search" action="{!c.search}">
        <aura:attribute name="boatTypeId" type="String"/>
    </aura:method>
    <aura:attribute name="boatTypeId" type="String"/>
    <div class='slds-m-around_medium'>
        <lightning:layout horizontalAlign="center" verticalAlign="center" multipleRows='true'>

            <aura:if isTrue="{!v.boats.length > 0}">
                <aura:iteration items="{!v.boats}" var="bot">
                    <lightning:layoutItem flexibility="grow" class="slds-m-around_small">
                        <c:BoatTile boat="{!bot}" />
                    </lightning:layoutItem>
                </aura:iteration>
                <aura:set attribute="else">
                    <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                        <ui:outputText value="No boats found" />
                    </lightning:layoutItem>
                </aura:set>
            </aura:if> 
        </lightning:layout>
    </div>
</aura:component>

Lightning组件框架专家 - 第3步 - Superbadge

1 个答案: