错误 - BoatSearchResults组件缺少正确的布局属性以创建多行

Question

我在完成“Lightning Component Framework Specialist”superbadge时遇到错误。有人可以帮我解决这个错误吗？

挑战尚未完成......这就是错误：BoatSearchResults组件缺少正确的布局组件，并具有相应的属性来创建多行。仔细检查要求，然后重试。

这是我的BoatSearchResults.cmp闪电组件的代码。

<aura:method name="search">
    <aura:attribute name="boatTypeId" type="String"/>
</aura:method>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:layout horizontalAlign="space" multipleRows="true">
<aura:if isTrue="{!v.boats.length > 0}">

        <aura:iteration items="{!v.boats}" var="bot">
            <c:BoatTile boat="{!bot}" />
         </aura:iteration>

    <aura:set attribute="else">
        <div style="text-align: center;"> No boats found </div>
    </aura:set>
</aura:if> 
</lightning:layout>

在此先感谢Swapnil。

Answer 1

经过几个小时的努力，我自己解决了这个问题:)这是工作代码。

<aura:component controller="BoatSearchResults" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="boats" type="Boat__c[]"/> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div>
    <lightning:layout multipleRows="true">

            <aura:if isTrue="{!v.boats.length > 0}">

            <aura:iteration items="{!v.boats}" var="bot">
                <lightning:layoutItem flexibility="auto" padding="around-small">
                <c:BoatTile boat="{!bot}" />
                </lightning:layoutItem>
             </aura:iteration>

            <aura:set attribute="else">
                <div class="slds-align_absolute-center">
                    No boats found
                </div>
            </aura:set>
        </aura:if> 
    </lightning:layout>
    </div>
</aura:component>