Using aura:iteration over lightning:outputField doesn't seem to work

Question

I'd like to display a list of configured fields (names possibly stored in CMDT) with lightning:recordViewForm, so it's easy to add/remove fields without deploying the component. However aura:iteration doesn't seem to play nice with lightning:outputField. To illustrate, this renders fine with expression as fieldName:

<aura:attribute name="myField" description="test single field" type="String" default="Total_Deductions__c"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:recordViewForm recordId="{!v.recordId}" objectApiName="F27011A_Detail__c">
    <div class="slds-box">
        <lightning:outputField fieldName="Total_Additions__c" />

        <lightning:outputField fieldName="{!v.myField}" />
    </div>
</lightning:recordViewForm>

but the following just gives me a blank box:

<aura:attribute name="detailAFieldList" description="field list for Detail__c part A" type="String[]" default="Total_Deductions__c, Total_Interest__c"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:recordViewForm recordId="{!v.recordId}" objectApiName="F27011A_Detail__c">
    <div class="slds-box">
        <aura:iteration items="{!v.detailAFieldList}" var="fieldA">
            <lightning:outputField fieldName="{!fieldA}" />


        </aura:iteration>  
    </div>
</lightning:recordViewForm>

Any thought why the difference?

Answer 1

You are just passing String of comma separated field names - you need to pass the array of fields. You have 2 options:

1. Set the attribute in JS doInit: (preferred)

COMPONENT:

<aura:attribute name="detailAFieldList" description="field list for Detail__c part A" type="String[]" default="[]"/>

JS:

doInit : function(component, event, helper) {
    component.set("v.detailAFieldList", ["Total_Deductions__c", "Total_Interest__c"]);
}

2. You can set in attribute default: