如何在闪电组件中的对象数组中添加更多数据

Question

我遇到的问题是我有一个带有对象数组的组件（A）。这是在dom上显示的。

然后我有另一个组件（B），它会触发一个事件以将一个对象添加到组件（A）中的数组。

组件（A）处理事件，它将对象添加到数组中，但是dom不会改变，除非我刷新页面。

let objectA = componet.get("v.objectA");  // Array of objects

objectA.push({ 
  name: 'test',
  id: 1234
});

$A.get('e.force:refreshView').fire();

我检查了数据，并且ObjectA有对象。有没有一种方法可以动态显示dom中的数据。

这是我家在做什么。遍历数组中的对象

  <aura:iteration items="{!v.objectA}" indexVar="actionIndex" var="obj">
     <c:componentA recordId="{#v.recordId}" actionIndex="{!actionIndex}" object="{!obj}" />
  </aura:iteration>

Answer 1

不是很清楚，组件A 和组件B 处于同一级别，还是组件B 是组件A < / em>。在这里，我将组件A 视为父组件，而组件B 是其子。

// controller.js
({
  doInit: function(component, event, helper) {
    helper.populateObjectList(component, event);
  },

  handleClick: function(component, event, helper) {
    helper.augmentObject(component, event);
  }
})

// helper.js
({
  populateObjectList: function(component, event) {
    var objs = [];
    objs.push(this.createObj('iPhone', 34000));
    objs.push(this.createObj('Motox', 27000));
    objs.push(this.createObj('Oneplus', 33033));
    component.set('v.objs', objs);
  },

  createObj: function(product, price) {
    var obj = new Object();
    obj.product = product;
    obj.price = price;
    return obj;
  },

  augmentObject: function(component, event) {
    var objs = component.get('v.objs');
    objs.push(this.createObj('Demo', 1000));
    component.set('v.objs', objs);
  }
})

<!-- lightning component -->
<!-- component A -->
<aura:component>
  <aura:attribute name="objs" type="Object[]" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <table>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
    <aura:iteration items="{!v.objs}" var="obj">
      <tr>
        <td>{!obj.product}</td>
        <td>{!obj.price}</td>
      </tr>
    </aura:iteration>
  </table>
  <!-- component B -->
  <lightning:button variant="brand" label="Add another" title="Brand action" onclick="{! c.handleClick }" />
</aura:component>

在这种情况下， lightning：button 被视为子组件。此按钮的 onclick 事件将另一个对象添加到由 parent 组件A迭代的对象列表中。不需要刷新该组件即可看到增强列表。

Answer 2

发生的问题是我没有重新分配闪电属性 让objectA = componet.get（“ v.objectA”）; //对象数组

objectA.push（{   名称：“ test”，   id：1234 }）;

component.set（“ v.objectA”，objectA））;

Answer 3

从服务器获取值时使用此代码段

var state = response.getState();
if (state === 'SUCCESS'){
                
  var result = response.getReturnValue()
  var objs = [];
  var i;
  for (i = 0; i < result.length; i++) {
      objs.push(this.createObj(result[i][0], result[i][1]));
  }//next
  cmp.set("v.objs", objs);
                
}//endif state