Iteration of Child Lightning Component

Question

I am building a lightning component for an app home page and want to render a list of records. I have created a parent component that iterates over a list of children components. The parent component loads on page load but the list child component won't render within the parent component. I've checked my apex controller to make sure the query is returning results - it is. As a check, I've done the iteration in the parent component and am able to render results.

Here's my code. What could I be missing?

Parent Component:

<aura:component implements="flexipage:availableForAllPageTypes" controller="WirelessEventListController">
    <aura:attribute name="wirEvList" type="Wireless_Events__c[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds-card">
        <div class="slds-card__header slds-grid">
            <div class="slds-media__body">
                <h2 class="slds-card__header-title">
                    <span>Upcoming Hospitality Events</span>
                </h2>
            </div>
        </div>
        <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_fixed-layout">
            <thead>
            <tr class="slds-text-heading_label">
                <th scope="col"><div class="slds-truncate slds-align_absolute-center" title="Date">Date</div></th>
                <th scope="col"><div class="slds-truncate slds-align_absolute-center" title="Event Name">Event Name</div></th>
                <th scope="col"><div class="slds-truncate slds-align_absolute-center" title="Spots">Spots</div></th>
                <th scope="col"><div class="slds-truncate slds-align_absolute-center" title="Location">Location</div></th>
                <th scope="col"><div class="slds-truncate slds-align_absolute-center" title="Link">Link</div></th>
            </tr>
        </thead>
            <tbody>
                <tr>
                    <aura:iteration var="x" items="{!v.wirEvList}">
                       <c:WirelessEventDetailList wirEv="{!x}"/>
                    </aura:iteration>         
                </tr>    
            </tbody>
        </table>
    </div>
</aura:component>

Parent Controller.js

({  
    doInit : function(component, event, helper) {
        var action = component.get("c.getAllwirelessEvents");
        action.setCallback(this, function(response){
            var name = response.getState();
            if (name === "SUCCESS") {
                component.set("v.wirEvList", response.getReturnValue());
                console.log(component.get("v.wirEvList"))
            }
        });
        $A.enqueueAction(action);
    },
   /*-- handleClick: function (component, event, helper) {
        var idLink = component.get("r.id")
        var urlLink = event.currentTarget.id;
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": idLink,
            "slideDevName": "detail"
        });
        navEvt.fire();
    } --*/
})

Child Component:

<aura:component>
    <aura:attribute name="wirEv" type="Wireless_Events__c"/>
    <td><div class="slds-truncate slds-align_absolute-center" title="{!wirEv.Start_Date__c}">{!wirEv.Start_Date__c}</div></td>
    <td><div class="slds-truncate" title="{!wirEv.Name}">{!wirEv.Name}</div></td>
    <td><div class="slds-truncate slds-align_absolute-center" title="{!wirEv.Spots_Remaining__c}">{!wirEv.Spots_Remaining__c}</div></td>
    <td><div class="slds-truncate" title="{!wirEv.Event_Location__c}">{!wirEv.Event_Location__r.Name}</div></td>
    <td><lightning:button variant="brand" label="Open" onclick="{!c.handleClick}"/></td>
</aura:component>

Child Controller:

({
    handleClick: function (component, event, helper) {
        var idLink = component.get("v.wirEv.id")
        console.log(idLink);
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": idLink,
            "slideDevName": "detail"
        });
        navEvt.fire();
    }
})

Apex Controller:

global with sharing class WirelessEventListController {
@auraEnabled
    public static List<Wireless_Events__c> getAllwirelessEvents()
    {
     List<Wireless_Events__c> wirEv=new LIST<Wireless_Events__c>();  
        wirEv=[select id,name,Spots_Remaining__c,Event_Location__r.Name,Start_Date__c from Wireless_Events__c where Event_Closed__c <> True ORDER BY Start_Date__c ASC NULLS LAST];
        return wirEv;
    } 
}

Answer 1

You also need to modify your child component, if you will load it will throw error as well. To show value of field on component we need to use the value provider "v" as well. Below is the correct code for child component -

<aura:component>
<aura:attribute name="wirEv" type="Wireless_Events__c"/>
<td><div class="slds-truncate slds-align_absolute-center" title=" 
{!v.wirEv.Start_Date__c}">{!v.wirEv.Start_Date__c}</div></td>
<td><div class="slds-truncate" title="{!v.wirEv.Name}">{!v.wirEv.Name}</div> 
</td>
<td><div class="slds-truncate slds-align_absolute-center" title=" 
{!v.wirEv.Spots_Remaining__c}">{!v.wirEv.Spots_Remaining__c}</div></td>
<td><div class="slds-truncate" title="{!v.wirEv.Event_Location__c}"> 
{!v.wirEv.Event_Location__r.Name}</div></td>

</aura:component>