In <force:recordData> not able to set it's recordId Attribute from client-side controller

Question

Whenever I click on the <lightning:button> inside <aura:iteration>, I need to delete that particular record using <force:recordData> but When I click on <lightning:button>, the envId is coming to the component but not going into <force:recordData recordId="{!v.envId}>,

so I am getting error as "Uncaught Action failed:

force:recordData$controller$deleteRecord [Must load record in force:recordData before delete.]"

<aura:component controller="SampleClass">
      <aura:attribute name="sfEnv" type="List" />
      <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
      <aura:attribute name="envId" type="String"/>
      <force:recordData aura:id="deleteHandler" 
                        recordId="{!v.envId}" <!--Id not coming here -->
                        fields="Id"
       />
      <aura:iteration items="{!v.sfEnv}" var="env" >                                        
           <lightning:button iconName="utility:delete" value="{!env.Id}" 
                      onclick="{!c.handleDeleteRecord}" variant="base"/>
      </aura:iteration><br/><br/>
      {!v.envId}  <!--Id coming here-->
</aura:component> 

JS Controller

({
 doInit : function(component, event, helper) {
        var action = component.get("c.getAllEnvironments");
         $A.enqueueAction(action);
        action.setCallback(this,function(response){
            if(response.getState() == "SUCCESS"){
                component.set("v.sfEnv",response.getReturnValue());
            }
        });
},
handleDeleteRecord: function(component, event, helper) {
        component.set("v.envId",event.getSource().get("v.value"));
        var result = confirm("Want to delete?");
        if (result) {
                 component.find("deleteHandler").deleteRecord($A.getCallback(function(deleteResult) {
                if (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") {
                    alert("Record is deleted.");
                }               
            }));
        }  
    }
})

Answer 1

There are couple of changes you need to make in order to work it:

1. use reloadRecord() Method so that force:recordData can understand your assignment.

2. Use recordUpdated attribute in force:recordData to get notify of change

So your code will look like this

component

<aura:component controller="SampleClass">
    <aura:attribute name="sfEnv" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
    <aura:attribute name="envId" type="String"/>

    <force:recordData aura:id="deleteHandler" 
                      recordId="{!v.envId}" fields="Id" recordUpdated="{!c.recordUpdated}"/>

    <aura:iteration items="{!v.sfEnv}" var="env" > 
        <lightning:button iconName="utility:delete" value="{!env.Id}" 
                          onclick="{!c.handleDeleteRecord}" variant="base"/>
    </aura:iteration>
    {!v.envId}  <!--Id coming here-->
</aura:component> 

Js controller

({
    doInit : function(component, event, helper) {
        helper.helperMethod(component);
    },
    recordUpdated : function(component, event, helper) {

        component.find("deleteHandler").deleteRecord($A.getCallback(function(deleteResult) {
            if (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") {
                helper.helperMethod(component);
                alert("Record is deleted.");
            }               
        }));
    },
    handleDeleteRecord: function(component, event, helper) {
        var result = confirm("Want to delete?");
        if (result) {
            component.set("v.envId",event.getSource().get("v.value"));
            component.find("deleteHandler").reloadRecord();
        }
    }
})

helper method (to reload remaining records)

({
    helperMethod : function(component) {
        var action = component.get("c.getAllEnvironments");
        $A.enqueueAction(action);
        action.setCallback(this,function(response){
            if(response.getState() == "SUCCESS"){
                component.set("v.sfEnv",response.getReturnValue());
            }
        });
    }
})

Answer 2

I think I've read that you should avoid using LDS with lists as it is very inefficient (link below). Also I see you calling the servers' getAllEnvironments, so it would seem you've combined two different ways getting data from SF, you're really not using LDS it the way it was originally designed.

How efficient is Lightning Data Service when working with multiple records?.