在Salesforce LWC中调用Apex时显示加载指示器 [英] Showing a loading indicator while calling Apex in Salesforce LWC

问题描述

在Lightning Web组件中从Apex检索数据时显示负载指示器的最佳方法是什么?

What is the best way to show a loading indicator while retrieving data from Apex in a Lightning Web Component?

我有这种方法:

import { LightningElement, api } from "lwc";
import shouldShowCard from "@salesforce/apex/ApexClass.shouldShowCard";

/**
 * Card component that is conditionally shown based on Apex.
 */
export default class ConditionalCard extends LightningElement {
    @api recordId;

    @api isDone = false;

    @api shouldShow = false;

    connectedCallback() {
        shouldShowCard({ id: this.recordId })
            .then(result => {
                this.shouldShow = result;
            })
            .finally(() => {
                this.isDone = true;
            });
    }
}

还有这个HTML

<template>
  <template if:false={isDone}>
    <div>Loading...</div>
  </template>
  <template if:true={shouldShow>
    <div>Card</div>
  </template>
</template>

现在，这可行，但是我正在使用LWC ESLint规则，当我这样做时，由于我在我的connectedCallback中分配了api属性，因此我得到一个错误/警告"no-api-reassignment". https://github. com/salesforce/eslint-plugin-lwc/blob/master/docs/rules/no-api-reassignments.md

Now, this works but I'm using the LWC ESLint rules, and when I do this, I get an error/warning "no-api-reassignment" because I'm assigning the api properties in my connectedCallback. https://github.com/salesforce/eslint-plugin-lwc/blob/master/docs/rules/no-api-reassignments.md

这似乎很合理，尽管它与Salesforce Lightning Spinner显示的模式非常相似. https://developer.salesforce.com/docs/component-图书馆/捆绑/闪电纺纱机/文档

Which seems reasonable, though it very similar to the pattern that the Salesforce Lightning Spinner shows. https://developer.salesforce.com/docs/component-library/bundle/lightning-spinner/documentation

因此，我只是在寻求有关解决此问题的最佳方法的建议，或者是否应该禁用ESLint规则.其他需要考虑的事情是如何测试这些东西，与API装饰器的反应性使我的工作变得很容易，但是如果我没有使用最佳方法，我就不想继续.

So I'm just looking for advice on the best way to handle this or if I should just disable the ESLint rule. Other things to consider are how to test this stuff, the reactivity with the API decorator has made things pretty easy on my end but I don't want to continue if I'm not using the best approach.

推荐答案

如果这些参数是内部状态，并且您不打算从父组件设置它们或将其公开给系统管理员，则不需要@api因此，他可以在Lightning App Builder中配置组件.您只需使用@track就可以了-甚至完全没有注释.对于简单变量，自Spring'20起，您就不需要@track(

You don't need @api if these parameters are internal state, if you don't plan to set them from parent component or expose them to System Administrator so he can configure the component in Lightning App Builder for example. You should be fine with just @track - or even no annotation at all. For simple variables you don't need @track since Spring'20 (release notes); you might still need it if your variable is array or object.

这应该很好地使ESLint静音.

This should silence ESLint nicely.

我的做法有所不同，个人喜好可追溯到Visualforce status和rendered的日子.

I do it bit differently, personal preference back from Visualforce status and rendered days I guess.

<template>
    <template if:true={loaded}>
        <p>Content goes here</p>
    </template>
    <template if:false={loaded}>
        <lightning-spinner variant="brand" alternative-text="Loading"></lightning-spinner>
    </template>
</template>


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

export default class StackExample extends LightningElement {
    @api recordId;
    @track data;
    loaded = false;

    @wire(someMethod, { i: '$recordId' }) wiredResponse({ error, data }) {
        if (data) {
            this.data = data;
            // some post-processing here
        } else if (error) {
            // show toast?
        }
        if(data || error){
            this.loaded = true;
        }
    }
}

请记住，某些标签如 <lightning-datatable> 有内部微调器.在文档中搜索isLoading.因此，您甚至不需要html中的if.

Remember that some tags like <lightning-datatable> have internal spinner. Search the documentation for isLoading. So you could even not need the ifs in the html.

这篇关于在Salesforce LWC中调用Apex时显示加载指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！