在 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 规则，当我这样做时，我收到错误/警告no-api-reassignment"，因为我在我的 connectedCallback 中分配了 api 属性.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 (发行说明);如果您的变量是数组或对象，您可能仍然需要它.

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 中的 ifs.

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