使用 Charts Js 在 Lightning Web 组件中将数据从父级传递给子级

Question

I recently ran into a problem using Charts JS in Lightning web components. I wanted to share a solution I found for those who run into problems

How to manually handle data changes in a child component when they are updated on the parent. This will work with everything but I was trying to update the Chartsjs example they show.

Answer 1

This is the solution I came up with.

The parent Controller Has the following nested function

@wire(getRecord, { recordId: '$recordId', fields: CONTACT_FIELDS })
wireContact({ error, data }) {
    if (data) {
        console.log('getRecord Data', JSON.stringify(data))
        this.contact = data;
        getAllDateRecords({ contactId: this.recordId })
            .then(result => {
                this.allDateRecords = result;
                this.chartReady = true;
            })
            .catch(err => console.log(JSON.stringify(err)));
    } else if (error) {
        console.error('error', error)
        this.contact = undefined;
    }

}

The Parent Component has c-debt-chart component andd its receiving data from the all-date-records:

<template>
<div class="slds-page-header__row slds-accordion__content">
                <div class="c-container w-100">
                    <lightning-layout horizontal-align="space">
                        <lightning-layout-item padding="around-small">
                            <template if:true={chartReady}>
                                <c-debt-chart all-date-records={allDateRecords}></c-debt-chart>
                            </template>
                        </lightning-layout-item>
                    </lightning-layout>
                </div>
            </div>
<template>

The Problem was that the examples on Salesforce dont show how to update the data in charts js. This is the solution I found using Getter and Setters

Child Component debt chart

<template>
    <lightning-card title="Debt Overview" icon-name="standard:currency">
        <div class="slds-m-around_medium">
            <canvas class="donut" lwc:dom="manual"></canvas>
        </div>
    </lightning-card>
</template>

Debt Chart Controller

Every Time the variable allDateRecords changes at the parent level. It will trigger the child to update using the getter setter methods. This way on the setter method it will fire the seperateDateObject function which does some logic to update the chart.

@api
get allDateRecords() {
    return this._allDateRecords;
}

set allDateRecords(value) {
    this._allDateRecords = value;
    this.separateDateObject();
}

Answer 2

Above Solution works when there are just one api properties that your logic is dependent on

If you have more than one api properties which could change simultaneously which also should collectively be used in decision-making, you might wanna use renderedCallback() to get the logic executed.

    @api
    get prop1() {
        return this._prop1;
    }
    set prop1(value) {
        this._prop1= value;
        this.somelogic();    //needs to be called in every dependent set prop
    }
    
    
    @api
    get prop2() {
        return this._prop2;
    }
    set prop2(value) {
        this._prop2= value;
        this.somelogic();   //needs to be called in every dependent set prop
    }

    somelogic(){
        this.showsomething = this._prop1 && this._prop2; //dependent logic
    }

calling somelogin within every setter might also result in abrupt UI behaviour during the properties are being set.

Instead

renderedCallback(){
    this.somelogic();    //can even execute code conditionally
}

if rendered callback is not triggered, force the rendering by using the api properties within the template with if:true, helps in implementing fail-safe code

<template if:true={_prop1}>
    <template if:true={_prop2}>
         <!--place dependant html here-->
    <template>
<template>