Angular - 加载时出现图像答案

【问题标题】：Angular - Image appears while loadingAngular - 加载时出现图像
【发布时间】：2021-01-21 03:44:17
【问题描述】：

我有一个问题，我有一个 HTML 元素，它的作用就像一个 loding spinner，我不希望它显示出来。我将使用 observables 来仅在数据完全加载后才能加载该元素。到目前为止，在我的组件中，我做到了：

const matchTableList$ = this.matchTablesService.list().pipe(
            map(matchTables => {
                matchTables = matchTables.sort((a, b) => a.name.toLocaleLowerCase() === b.name.toLocaleLowerCase() ? 0 : a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? -1 : 1);
                this.matchTables$.next(matchTables);
            }),
            catchError( (error: HttpErrorResponse) => {
                this.loadingError$.next(true);
                return EMPTY;
            }),
            finalize(() => {
                this.prettyMessageData = new PrettyMessageContent();
                this.prettyMessageData.title = "hello"
                this.prettyMessageData.message = " ";
              this.prettyMessageData.withMessage(this.prettyMessageData.message);
            })
        );

在我制作的 HTML 中：

<div *ngIf="!matchTablesLine" class="justify-content-center">
    <pretty-message style="width: 100%;" [data]="prettyMessageData">
    </pretty-message>
    <div class="d-flex justify-content-center mt-5">
        <button class="btn--primary" (click)="createMatchTable()"><i class="add-circle-line"></i>add</button>
    </div>
</div>

所以这里的问题是，当没有数据时，漂亮的消息不会显示，而当有数据时，html div 在我得到数据之前就已经加载了，所以在页面中看到一个按钮很奇怪加载。我认为可以在这里使用可观察对象和运算符，但我真的不知道使用哪个来完成这项工作。谢谢。

编辑：我使用一个简单的解析器解决了这个问题，这在这种情况下真的很有帮助。

【问题讨论】：

什么是matchTablesLine？该变量不在您的代码中。
matchTablesLine 指的是我声明的一个对象，带有一个 id、一个名称等。我只是没有把整个代码。 @JohnPeters 我会尝试使用你的方法。
@JohnPeters 我按照你的方式做了，就像这样： const matchTableList$ = this.matchTablesService.list().pipe( map(matchTables => { this.isLoading = true; matchTables = matchTables.sort ((a, b) => a.name.toLocaleLowerCase() === b.name.toLocaleLowerCase() ? 0 : a.name.toLocaleLowerCase()
对不起@JohnPeters，但它仍然不起作用。它不会等待数据加载，并且在数据加载时按钮仍会出现一秒钟。我关注了你的链接细节，听起来不错，我试过了，但还是不行，或者我用错了。
似乎如果 matchTablesLine 中的对象未定义然后显示漂亮消息是这样的吗？你可以试试这个 *ngIf="prettyMessageData.title" 吗？

标签： javascript angular typescript rxjs rxjs-observables

【解决方案1】：

我相信您正试图在 prettyMessageData 未定义时延迟按钮的呈现。您可以通过在按钮 div 上添加 *ngIf=prettyMessageData 来实现此目的。

 <div *ngIf="prettyMessageData" class="d-flex justify-content-center mt-5">
    <button class="btn--primary" (click)="createMatchTable()"><i class="add-circle-line"></i>add</button>
 </div>

【讨论】：