Unable to display Data using recordViewForm

Question

I want to display list of contacts based on the accountId.In the component's helper,I am able to get the accountId in debug logs but when I use lightning:recordViewForm inside an aura:iteration tag then it doesn't show error and does not display any records either. Please let me know the issue. Here's the code.

Server-Side Controller

public static List<Contact> getContacts(List<ID> accountIDs){
        return [select Id,FirstName,LastName from contact
                where AccountId in : accountIDs];
}

Component:

 <aura:component implements=flexipage:availableForRecordHome,
                       force:hasRecordId,
                       controller="MyContactController">
   <aura:attribute name="contactList" type="List"
   <aura:handler name="init" value="{!this}" action="{!c.FetchContactList}"/>
   <aura:if isTrue="{! not( empty( v.recordId))}">
   <aura:iteration items="{!v.contactList}" var="con">
      <lightning:recordViewForm recordId="{!con.Id}" objectApiName="contact">
        <lightning:outputField fieldName="{FirstName}" />
          <lightning:outputField fieldName="{LastName}" />

Client-Side Controller:

FetchContacts : function(component,event,helper) {
 var action = component.get("c.getContacts");
 var accId=component.get('v.recordId');
 action.setParams({"accountIDs" : accId});
  action.setCallback(this,function(response)
    {
        var state=response.getState();           
        if (state === "SUCCESS")
        {
            var conList=response.getReturnValue();
            component.set("v.contactList",conList);
        }
       });
  $A.enqueueAction(action);
 })

Answer 1

Few observations about your code.

1. You are passing single accountId to your apex class, but collecting it in a List. So correction is needed in your apex class.

2. RecordId of an account is not flowing from an aura:application to aura:component. force:hasRecordId could have worked only if you are directly calling your lightning component from an lightning action. So you need to have an attribute on your aura:component to capture recordId.

3. In lightning:outputField for fieldName attribute you are using {!con.FirstName} which is incorrect. fieldName should be the api name of the field, in this case it's "FirstName"

Final code:

Apex Class Method:

@AuraEnabled
public static List<Contact> getContacts(Id accountIDs) {
    return [Select Id, FirstName FROM Contact WHERE AccountId = :accountIDs];
}

Lightning Component Code:

<aura:attribute name="contactList" type="List" />
<aura:attribute name="recordId" type="Id" /> <!-- added line -->
<aura:handler name="init" value="{!this}" action="{!c.FetchContactList}"/>

<aura:iteration items="{!v.contactList}" var="con"> 
    <lightning:recordViewForm recordId="{!con.Id}" objectApiName="Contact"> 
        <lightning:outputField fieldName="FirstName"/> 
    </lightning:recordViewForm>
</aura:iteration>

Component Helper Code:

FetchContacts : function(component,event,helper) { 
    var action = component.get("c.getContacts"); 
    var accId = component.get('v.recordId'); 
    action.setParams({ "accountIDs" : accId }); 
    action.setCallback(this,function(response) { 
        var state=response.getState(); 
        if (state === "SUCCESS") { 
            var conList = response.getReturnValue(); 
            component.set("v.contactList",conList);
        }
    });

    $A.enqueueAction(action);
}