Передача данных от родителя к потомку в веб-компоненте Lightning с использованием диаграмм Js - PullRequest
Новая
       15

Передача данных от родителя к потомку в веб-компоненте Lightning с использованием диаграмм Js

1 голос
/ 05 марта 2019

Недавно я столкнулся с проблемой использования Charts JS в веб-компонентах Lightning. Я хотел бы поделиться решением, которое я нашел для тех, кто сталкивается с проблемами

Как вручную обрабатывать изменения данных в дочернем компоненте, когда они обновляются в родительском компоненте. Это будет работать со всем, но я пытался обновить пример Chartsjs, который они показывают.

1 Ответ

1 голос
/ 05 марта 2019

Это решение, которое я придумал.

Родительский контроллер имеет следующую вложенную функцию 

@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;
    }

}

Родительский компонент имеет компонент c-debt-chart и получает свои данные из записей всех дат: 

<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>

Проблема заключалась в том, что примеры в Salesforce не показывают, как обновить данные в диаграммах js. Это решение, которое я нашел, используя Getter и Setters

Диаграмма задолженности дочерних компонентов 

<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>

Контроллер долговых графиков

Каждый раз, когда переменная allDateRecords изменяется на родительском уровне. Это приведет к тому, что дочерний процесс будет обновлен с использованием методов метода получения. Таким образом, в методе setter будет запущена функция seperateDateObject, которая выполняет некоторую логику для обновления диаграммы. 

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

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