aura:if 未评估且 aura:iteration 未显示
aura:if is not evaluating and aura:iteration not displaying
我有一个 Lightning 组件,用于侦听更新帐户事件并检索关联的联系人和用户。然后它会显示联系人属于哪个帐户以及联系人和用户总数,并创建带有重复磁贴的 SLDS 卡。
它工作正常,直到我在加载联系人时将 header 更改为说 'Loading'。我添加了两个新属性(一个保存加载状态,一个保存联系人和用户总数)并添加了更新这些属性的逻辑。不知何故,它坏了,我不知道它是怎么坏的。
根据控制台和调试日志,一切正常。正在从 Apex 控制器正确检索联系人和用户,并将这些值写入属性。但是,没有任何更新。
ContactTable.cmp
<header class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__body">
<h2>
<span class="slds-text-heading--large">
<aura:if istrue="{!v.accountName}">
Contacts For {!v.accountName}: {!v.contactsLoadingStatus}
<aura:set attribute="else">
Contacts: - Please Select a Clinic -
</aura:set>
</aura:if>
</span>
</h2>
</div>
</header>
.........
(Contacts Tile Iterator)
.........
<aura:if istrue="{!v.contacts.length > 0}">
<h2 style="padding-left: 1.5rem;"><span class="slds-text-heading--medium">Contacts</span></h2>
<div class="slds-card__body--inner slds-grid slds-wrap" style="margin-bottom: 30px; height: 20rem; overflow: auto; border: 1px solid rgba(128, 128, 128, 0.32); border-radius: 10px;">
<aura:iteration items="{!v.contacts}" var="singleContact">
<c:ContactTableContactCard singlecontact="{!singleContact}" />
</aura:iteration>
</div>
</aura:if>
ContactTableController.js
handleUpdateAccountEvent: function(component, event, helper){
helper.updateAccount(component, event);
component.set('v.selectedContacts', null);
component.set('v.total', 0);
console.log('Account ID: ' + component.get('v.accountID'));
console.log('Account Name: ' + component.get('v.accountName'));
if(component.get('v.accountID')){
console.log('Grabbing contacts and team members');
component.set('v.contactsLoadingStatus', 'Loading...');
helper.setContacts(component, helper);
helper.setTeamMembers(component, helper);
}
else{
component.set('v.contacts', null);
component.set('v.teamMembers', null);
}
},
ContactTableHelper.js
setContacts: function (component, helper) {
var action = component.get("c.getContacts");
var accountID = component.get("v.accountID");
action.setParams({'accountId':accountID});
action.setCallback(this, function(response){
if(component.isValid()){
var state = response.getState();
if(state === 'SUCCESS'){
var contacts = response.getReturnValue();
component.set("v.contacts", contacts);
var total = component.get("v.total");
total += contacts.length;
component.set("v.total", total);
component.set("v.contactsLoadingStatus", total + " Records");
contacts = component.get('v.contacts');
console.log('Grabbing contacts.... Done');
console.log('contacts:');
console.log(contacts);
}
else{
console.log('There was an issue in retrieving the contacts.');
console.log(state);
if(state === 'ERROR'){
var errors = response.getError;
for(var i = 0; i < errors.length; i++){
console.log(errors[i].message);
}
}
}
}
});
$A.enqueueAction(action);
console.log('Grabbing contacts....');
},
updateAccount: function(component, event){
var accountID = event.getParam("accountID");
component.set("v.accountID", accountID);
var accountName = event.getParam("accountName");
component.set("v.accountName", accountName);
console.log('finished updateAccount');
},
我省略了 setTeamMembers,因为它或多或少与 setContacts 相同。
相关控制台日志:
finished updateAccount
Account ID: 001F0000013YX5DIAW
Account Name: ~NAME~.
Grabbing contacts and team members
Grabbing contacts....
Grabbing team members....
Grabbing contacts.... Done
contacts:
[Object, Object, Object]
Grabbing team members.... Done
teamMembers:
[Object, Object, Object, Object, Object, Object]
我明白了。我使用了 IDE 的代码格式化程序,它改变了
<aura:if isTrue="">
至
<aura:if istrue="">
因此,如果其他人遇到此问题,请检查您的拼写。
我有一个 Lightning 组件,用于侦听更新帐户事件并检索关联的联系人和用户。然后它会显示联系人属于哪个帐户以及联系人和用户总数,并创建带有重复磁贴的 SLDS 卡。
它工作正常,直到我在加载联系人时将 header 更改为说 'Loading'。我添加了两个新属性(一个保存加载状态,一个保存联系人和用户总数)并添加了更新这些属性的逻辑。不知何故,它坏了,我不知道它是怎么坏的。
根据控制台和调试日志,一切正常。正在从 Apex 控制器正确检索联系人和用户,并将这些值写入属性。但是,没有任何更新。
ContactTable.cmp
<header class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__body">
<h2>
<span class="slds-text-heading--large">
<aura:if istrue="{!v.accountName}">
Contacts For {!v.accountName}: {!v.contactsLoadingStatus}
<aura:set attribute="else">
Contacts: - Please Select a Clinic -
</aura:set>
</aura:if>
</span>
</h2>
</div>
</header>
.........
(Contacts Tile Iterator)
.........
<aura:if istrue="{!v.contacts.length > 0}">
<h2 style="padding-left: 1.5rem;"><span class="slds-text-heading--medium">Contacts</span></h2>
<div class="slds-card__body--inner slds-grid slds-wrap" style="margin-bottom: 30px; height: 20rem; overflow: auto; border: 1px solid rgba(128, 128, 128, 0.32); border-radius: 10px;">
<aura:iteration items="{!v.contacts}" var="singleContact">
<c:ContactTableContactCard singlecontact="{!singleContact}" />
</aura:iteration>
</div>
</aura:if>
ContactTableController.js
handleUpdateAccountEvent: function(component, event, helper){
helper.updateAccount(component, event);
component.set('v.selectedContacts', null);
component.set('v.total', 0);
console.log('Account ID: ' + component.get('v.accountID'));
console.log('Account Name: ' + component.get('v.accountName'));
if(component.get('v.accountID')){
console.log('Grabbing contacts and team members');
component.set('v.contactsLoadingStatus', 'Loading...');
helper.setContacts(component, helper);
helper.setTeamMembers(component, helper);
}
else{
component.set('v.contacts', null);
component.set('v.teamMembers', null);
}
},
ContactTableHelper.js
setContacts: function (component, helper) {
var action = component.get("c.getContacts");
var accountID = component.get("v.accountID");
action.setParams({'accountId':accountID});
action.setCallback(this, function(response){
if(component.isValid()){
var state = response.getState();
if(state === 'SUCCESS'){
var contacts = response.getReturnValue();
component.set("v.contacts", contacts);
var total = component.get("v.total");
total += contacts.length;
component.set("v.total", total);
component.set("v.contactsLoadingStatus", total + " Records");
contacts = component.get('v.contacts');
console.log('Grabbing contacts.... Done');
console.log('contacts:');
console.log(contacts);
}
else{
console.log('There was an issue in retrieving the contacts.');
console.log(state);
if(state === 'ERROR'){
var errors = response.getError;
for(var i = 0; i < errors.length; i++){
console.log(errors[i].message);
}
}
}
}
});
$A.enqueueAction(action);
console.log('Grabbing contacts....');
},
updateAccount: function(component, event){
var accountID = event.getParam("accountID");
component.set("v.accountID", accountID);
var accountName = event.getParam("accountName");
component.set("v.accountName", accountName);
console.log('finished updateAccount');
},
我省略了 setTeamMembers,因为它或多或少与 setContacts 相同。
相关控制台日志:
finished updateAccount
Account ID: 001F0000013YX5DIAW
Account Name: ~NAME~.
Grabbing contacts and team members
Grabbing contacts....
Grabbing team members....
Grabbing contacts.... Done
contacts:
[Object, Object, Object]
Grabbing team members.... Done
teamMembers:
[Object, Object, Object, Object, Object, Object]
我明白了。我使用了 IDE 的代码格式化程序,它改变了
<aura:if isTrue="">
至
<aura:if istrue="">
因此,如果其他人遇到此问题,请检查您的拼写。