版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhang44429824/article/details/82688551
1.经常.id取不到值，最好要大写I，如图写;
Application Event 事件获取不到问题：错误信息：Cannot read property 'setParams' of undefined
之前代码如图：
将application event 获取定义到invoke（callback）方法外面，即能获取到。
另外Application在handle的时候，是没有name属性的，一定要注意（component event必须有name属性）：如图：
遇到一个问题，在使用attribute往子component传递属性的时候，子companies获取不到：
父component：：
<aura:component description="LtngSPSalesBargainingScopeCmp" controller="LtngSPCustomerBargainingScopeCtrl">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="salesMessages" type="List" access="public"/>
<aura:attribute name="salesMessage" type="Object"/>
<aura:attribute name="areas" type="List" access="public"/>
<aura:attribute name="countries" type="List" access="public"/>
<aura:attribute name="showList" type="Boolean" default="true"/>
<aura:handler name="deleteSalesItem" event="c:LtngSPAreaMaterialsEvt" action="{!c.handleDeleteSales}"/>
<aura:handler name="editCustomerItem" event="c:LtngSPAreaMaterialsEvt" action="{!c.handleEditSales}"/>
<aura:handler name="onCancel" event="c:LtngSPAreaMaterialsEvt" action="{!c.doCancel}"/>
<c:LtngBaseService aura:id="baseService"/>
<aura:if isTrue="{!v.showList}">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
<lightning:layout>
<lightning:layoutItem largeDeviceSize="3" mediumDeviceSize="3" smallDeviceSize="3"
flexibility="grow"
size="3">
<lightning:button label="Submit" variant="destructive" onclick="{!c.doSubmit}"/>
<lightning:button label="Add" variant="destructive" onclick="{!c.doAdd}"/>
<lightning:button label="Export" variant="destructive" onclick="{!c.doExport}"/>
</lightning:layoutItem>
<lightning:layoutItem largeDeviceSize="1" mediumDeviceSize="1" smallDeviceSize="1"
flexibility="grow"
size="1">
<lightning:select label="Areas" aura:id="chooseAreas"
name="chooseAreas" variant="label-hidden" class="slds-size_xx-small">
<option value="All Areas" selected="selected">All Areas</option>
<aura:iteration items="{!v.areas}" var="item">
<option value="{!item.name}">{!item.name}</option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem largeDeviceSize="1" mediumDeviceSize="1" smallDeviceSize="1"
flexibility="grow"
size="1">
<lightning:select label="Countries" aura:id="chooseCountries"
name="chooseCountries" variant="label-hidden" class="slds-size_x-small">
<option value="All Countries" selected="selected">All Countries</option>
<aura:iteration items="{!v.countries}" var="item">
<option value="{!item.name}">{!item.name}</option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem largeDeviceSize="1" mediumDeviceSize="1" smallDeviceSize="1"
flexibility="grow"
size="1" class="Margin_left">
<lightning:input label="endDate" variant="label-hidden" placeholder="End Date"
class="slds-size_xx-small"/>
</lightning:layoutItem>
<div style="line-height:32px;margin-right:30px;margin-left: 0px">
--
</div>
<lightning:layoutItem largeDeviceSize="1" flexibility="grow"
size="1">
<lightning:input label="startDate" variant="label-hidden" placeholder="Effective Date"/>
</lightning:layoutItem>
<lightning:layoutItem smallDeviceSize="2" mediumDeviceSize="2" largeDeviceSize="2"
flexibility="grow"
size="2">
<lightning:button label="Search" variant="destructive" onclick="{!c.doSearch}"
class="slds-size_xx-small"/>
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
</lightning:layout>
<div aura:id="sales-container" class="sales-container">
<lightning:card title="">
<div class="h-container">
<lightning:layout verticalAlign="center">
<lightning:layoutitem size="1" padding="around-small">
<ui:inputCheckbox/>
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
区域
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
国家
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
项目销售工程师-中方
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
项目销售工程师-外籍
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
渠道销售工程师-中方
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
渠道销售工程师-外籍
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
国家代表
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
生效日期
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
截止日期
</lightning:layoutitem>
<lightning:layoutitem size="2" padding="around-small">
操作
</lightning:layoutitem>
</lightning:layout>
</div>
<aura:iteration items="{!v.salesMessages}" var="salesMessageItem">
<c:LtngSPSalesBargainingScopeItemCmp salesMessage="{!salesMessageItem}"/>
</aura:iteration>
</lightning:card>
</div>
<aura:set attribute="else">
<!-- 此处传值失败，暂时通过method方法来传值 -->
<c:LtngSPSalesBargainingScopeDetailCmp salesMessage="{!v.salesMessage}"/>
</aura:set>
</aura:if>
</aura:component>父controller:
/**
* Created by zhezhana on 9/25/2018.
*/
({
doInit: function (component, event, helper) {
/**
var areas = [
{
name: "North America",
},
{
name: "West Europe",
},
{
name: "East Asia",
},
];
var countries = [
{
name: "USA",
},
{
name: "CA",
},
{
name: "France",
},
{
name: "Poland",
},
];
component.set("v.areas", areas);
component.set("v.countries", countries);
// console.log(areas);
var salesMessages = [
{
id: "1",
area: 'West Europe',
country: 'France',
salesProjectCN: '5%',
salesProjectFor: '5%',
salesChannelCN: '15%',
salesChannelFor: '15%',
countryRepresent: '0%',
effectiveDate: '20180401',
closingDate: '0190301',
},
{
id: "2",
area: 'North America',
country: 'USA',
salesProjectCN: '0%',
salesProjectFor: '0%',
salesChannelCN: '20%',
salesChannelFor: '10%',
countryRepresent: '25%',
effectiveDate: '20180301',
closingDate: '20190101',
},
{
id: "3",
area: 'North America',
country: 'USA',
salesProjectCN: '0%',
salesProjectFor: '0%',
salesChannelCN: '20%',
salesChannelFor: '10%',
countryRepresent: '25%',
effectiveDate: '20180301',
closingDate: '20190101',
}
];
// console.log(JSON.stringify(salesMessages));
component.set("v.salesMessages", salesMessages);
*/
var baseSvc = component.find('baseService');
/**get the action of apex controller**/
var salesBargainingRangeData = component.get("c.getSalesBargainingRangeDatas");
/**set param**/
baseSvc.invoke(salesBargainingRangeData).then(function (result) {
//invoked if the request succeed
console.log('getSalesBargainingRangeDatas-result----------->' + JSON.stringify(result));
component.set("v.salesMessages", result);
}).catch(function (error) {
//invoked if the request fail
console.log("***ERROR：" + error);
});
},
doSubmit: function (component, event, helper) {
alert("doSubmit");
},
doAdd: function (component, event, helper) {
alert("doAdd");
},
doExport: function (component, event, helper) {
alert("doExport");
},
doSearch: function (component, event, helper) {
alert("doExport");
},
handleDeleteSales : function (component, event, helper) {
var messageId = event.getParam("salesId");
console.log("handleDeleteSales"+messageId);
var salesMessages = component.get("v.salesMessages");
var salesTemp = salesMessages.reduce((prev, item) => {
if (item.id != messageId) {
prev.push(item);
}
return prev;
}, []);
component.set("v.salesMessages", salesTemp);
console.log(salesTemp);
console.log("salesId::" + messageId);
},
handleEditSales : function (component, event, helper) {
let mes = event.getParams("message");
component.set('v.salesMessage',mes);
console.log("new v.salesMessage--------->"+JSON.stringify(component.get("v.salesMessage")));
component.set("v.showList",false);
},
doCancel : function(component, event, helper) {
component.set("v.showList",true);
}
})子component：
<!--
- Created by zhezhana on 9/28/2018.
-->
<aura:component description="LtngSPSalesBargainingScopeDetailCmp">
<aura:attribute name="salesMessage" type="Object"/>
<aura:registerEvent name="onCancel" type="c:LtngSPAreaMaterialsEvt"/>
<lightning:card title="">
<aura:set attribute="actions">
<lightning:button variant="destructive" label="Cancel" onclick="{!c.doCancel}"/>
</aura:set>
<p>name::{!v.salesMessage.Name}</p>
</lightning:card>
</aura:component>子controller：
/**
* Created by zhezhana on 9/25/2018.
*/
({
doCancel: function (component, event, helper) {
var cancelEvt = component.getEvent("onCancel");
cancelEvt.fire();
},
getSalesMessage: function (component, event, helper) {
},
})父的另一个子component：
<!--
- Created by zhezhana on 9/28/2018.
-->
<aura:component description="LtngSPSalesBargainingScopeItemCmp">
<aura:attribute name="salesMessage" type="Object"/>
<aura:registerEvent name="deleteSalesItem" type="c:LtngSPAreaMaterialsEvt"/>
<aura:registerEvent name="editCustomerItem" type="c:LtngSPAreaMaterialsEvt"/>
<div class="item-container">
<lightning:layout verticalAlign="center">
<lightning:layoutitem size="1" padding="around-small">
<ui:inputCheckbox/>
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
<lightning:select label="Areas" aura:id="chooseAreas"
name="chooseAreas" variant="label-hidden" class="slds-size_xx-small">
<option value="{!v.salesMessage.country}" selected="selected">{!v.salesMessage.Area__c}</option>
</lightning:select>
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
<lightning:select label="Countries" aura:id="chooseCountries"
name="chooseCountries" variant="label-hidden" class="slds-size_xx-small">
<option value="{!v.salesMessage.country}" selected="selected">{!v.salesMessage.Country__c}</option>
</lightning:select>
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
<lightning:formattedNumber value="{!v.salesMessage.Project_Sales_Engineer_CN__c /100}" style="percent" maximumFractionDigits="3"/>
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
<lightning:formattedNumber value="{!v.salesMessage.Project_Sales_Engineer_FN__c /100}" style="percent" maximumFractionDigits="3"/>
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
<lightning:formattedNumber value="{!v.salesMessage.Channel_Sales_Engineer_CN__c /100}" style="percent" maximumFractionDigits="3"/>
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
<lightning:formattedNumber value="{!v.salesMessage.Channel_Sales_Engineer_FN__c /100}" style="percent" maximumFractionDigits="3"/>
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
<lightning:formattedNumber value="{!v.salesMessage.Country_Representatives__c/100}" style="percent" maximumFractionDigits="3"/>
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
{!v.salesMessage.Valid_From__c}
</lightning:layoutitem>
<lightning:layoutitem size="1" padding="around-small">
{!v.salesMessage.Valid_To__c}
</lightning:layoutitem>
<lightning:layoutitem size="2" padding="around-small">
<lightning:buttonIcon iconName="utility:edit" onclick="{!c.doEdit}"/>
<lightning:buttonIcon iconName="utility:delete" onclick="{!c.doDelete}"/>
</lightning:layoutitem>
</lightning:layout>
</div>
</aura:component>父的另一个子的controller：
/**
* Created by zhezhana on 9/25/2018.
*/
({
doDelete : function (component, event, helper) {
console.log("doDelete!!");
var salesMessage = component.get("v.salesMessage");
var deleteSales = component.getEvent('deleteSalesItem');
deleteSales.setParams({"salesId" : salesMessage.id});
deleteSales.fire();
console.log("fire!!");
},
doEdit : function (component, event, helper) {
var editEvt = component.getEvent("editCustomerItem");
editEvt.setParams({message : component.get("v.salesMessage")});
editEvt.fire();
}
})