1

I want to display the list of opportunities when a button is clicked. For some reason, my code does not work.

Apex class:

public with sharing class OpportunityController {
   
   @AuraEnabled(Cacheable = true)
    public static List<Opportunity> getAllStages(){
       return [Select Name, StageName from Opportunity order by Name];
    }
}

Parent component HTML:

<template>
    <lightning-card title="Opportunities">
        <div class="slds-var-m-around_medium">
            <lightning-button label="All" onclick={allStages}></lightning-button>
        </div>

        <template for:each={oppresult} for:item="rslt">
            <c-wired-opportunities key={rslt} ></c-wired-opportunities>
        </template>

    </lightning-card>
</template>

Child component HTML:

<template>
        <div class="slds-var-m-around_medium">
            <h4>{rslt.Name}</h4>
            <h4>{rslt.StageName}</h4>
        </div>
</template>

Parent component JS:

import { LightningElement, api, wire, track } from 'lwc';
import getAllStages from '@salesforce/apex/OpportunityController.getAllStages';

const COLUMNS = [
    {label: 'Name', fieldName: 'Name', type:'text'},
    {label: 'Stage', fieldName: 'StageName', type:'text'}
];

export default class WireDemo extends LightningElement {
    columns = COLUMNS;

    oppresult;
    errorMsg;

    allStages(){
        getAllStages()
        .then(result =>{
            this.oppresult = result;
        })
        .catch(error =>{
            this.errorMsg = error;
        })
    }
}
4
  • What error you are getting?
    – Saroj Bera
    May 12 at 11:16
  • I don't get any error. It is just not displaying the result
    – Hari Ha
    May 12 at 11:23
  • 1
    Can you please post the child component JS as well. Please edit/update the question.
    – Saroj Bera
    May 12 at 11:36
  • What Saroj said. You can also check to make sure you're getting the right stuff back on the click event by sticking something like console.log(this.oppresult); after the assignment in the then of your allStages() function.
    – Victor L.
    May 12 at 11:45
3

I don't see any error in your code for Parent Component. Make sure you have marked the Opportunity public variable with @api decorator in child. Also the parameter name should be same as public property while passing from Parent to child. Check the below code and see if you are missing anything in your code.

Parent HTML

.....................
.....................
<template for:each={oppresult} for:item="rslt">
    <c-wired-opportunities opp={rslt} key={rslt.Id}></c-wired-opportunities>
</template>
.....................
.....................

Child JS

import { LightningElement,api } from 'lwc';

export default class WiredOpportunities extends LightningElement {
    @api opp;
}

Child HTML

<template>
    <div class="slds-var-m-around_medium">
        <h4>{opp.Name}</h4>
        <h4>{opp.StageName}</h4>
    </div>
</template>
1

The only error I see is the fact that you are not passing the record/opportunity from the parent to the child, which would explain why the data is not rendered, and there is no error. you currently have

<template for:each={oppresult} for:item="rslt">
    <c-wired-opportunities key={rslt} ></c-wired-opportunities>
</template>

you are assigning a key, but not passing the 'rstl' object to your child component.

if you correct your code to what @Saroj Bera has, your component should render your opportunity details.

0

I just solved this problem. Made the following change to the parent HTML file and also created a variable in the child js file called oppList.

<c-wired-opportunities key={rslt} opp-list={rslt} ></c-wired-opportunities>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.