Cant pass attribute from iteration to child component

Question

Let's say I have two components. Part of Parent

 <aura:iteration items = "{!v.resultSet}" var = "record">
               <tr data-id = "{#record.id}"> 
                   <aura:iteration items = "{#record.data}" var = "field" indexVar="idx">
                        <td role="gridcell" class="slds-cell-edit slds-cell-container slds-is-resizable" >
                                   <c:soqlField field="{!field}"/>
                                   </td>
                   </aura:iteration>
               </tr>
           </aura:iteration>

and c:soqlField component

<aura:component>
<aura:attribute name = "field" type = "List"/>
    <aura:if isTrue="{#field.fieldType == 'url'}">
            <a href="{#'/' + field.data}">{#field.data}</a>
        <aura:set attribute = "else">
                <div class="slds-truncate" >{#field.data}</div>
        </aura:set>    
        </aura:if>

but in runtime i got an error

Uncaught Assertion Failed!: Unable to get value for key 'field.fieldType'. No value provider was found for 'field'. : false

what is wrong in my case? What should I do to achieve my goal?

Answer 1

# is for 1 time binding, only the value passed/assigned before UI renders will be shown in UI and any further changes will not reflect in UI, so, it is recommended to use ! if you want to reflect the changes dynamically. Also you should use v. in component.

Below change in soqlField component should work:

<aura:if isTrue="{!v.field.fieldType == 'url'}">
    <a href="{!'/' + v.field.data}">{!v.field.data}</a>
    <aura:set attribute = "else">
        <div class="slds-truncate" >{!v.field.data}</div>
    </aura:set>    
</aura:if>

Answer 2

Change this <c:soqlField field="{!field}"/> to <c:soqlField field="{!v.field}"/> . You are missing the access provider v.

Answer 3

The attribute in the child is of Type List, and the list doesn't have any attribute like fieldType, data. See your code below:

<aura:attribute name = "field" type = "List"/>

So if you are passing the list then you will need to use aura:iteration. If you want to add some extra data with list you can create a wrapper object like

{ fieldType: '', data : [] }

---

If the data is not of tyle list then you need to change the datatype to Object in child component like below

<aura:attribute name="data" type="Object" />

Answer 4

A little bit changing and everything is okay!

 <aura:if isTrue="{!v.field.fieldType == 'url'}">
    <a href="{!'/' + v.field.data}">{!v.field.data}</a>
<aura:set attribute = "else">
    <div class="slds-truncate" >{!v.field.data}</div>
</aura:set>    
</aura:if>