嵌套闪电光环迭代答案

【问题标题】：Nested lightning aura iteration嵌套闪电光环迭代
【发布时间】：2019-06-20 06:55:40
【问题描述】：

我有一个嵌套的光环：像这样的迭代：

<aura:iteration items="{!v.results}" var="res">                  
    <tr class="slds-hint-parent">
        <aura:iteration items="{!v.ColumnsNameArr}" var="colName">
            <td>
                <div class="slds-truncate" >
                    <a href="javascript:void(0);">{!res[colName]}}</a> 
                </div>
            </td>
        </aura:iteration>                    
    </tr>
</aura:iteration>

我怎样才能写出正确的 {!res[colName]}？有可能在闪电中做这样的事情吗？

【问题讨论】：

标签： salesforce-lightning aura-framework

【解决方案1】：

看起来您想要迭代res 属性，在我看来是Map 类型。在 Lightning Aura 中，不可能迭代 Map (Apex) / Object (Javascript)。

作为解决方案，您可以做的是将res 映射转换为Array (Javascript) 类型或在Apex 中转换为List 类型。

在 Lightning Aura 中，可以迭代 Array's。

那会是什么样子：


{
  process: function() {
    var res = { a: 1, b: 2};
    var resArray = [];

    for (var key in res) {
      resArray.push({ 
        key: key, 
        value: res[key] 
      });
    }

    // now, from here on you can use the 'resArray' to iterate in your Aura component

  }
}

【讨论】：

【解决方案2】：

这是可能的。在下一层使用迭代变量。我认为这会奏效...

<aura:iteration items="{!v.results}" var="res">                  
<tr class="slds-hint-parent">
    <aura:iteration items="{!res.ColumnsNameArr}" var="colName">
        <td>
            <div class="slds-truncate" >
                <a href="javascript:void(0);">{!colName}}</a> 
            </div>
        </td>
    </aura:iteration>                    
</tr>

【讨论】：