角度-加载时出现图像

问题描述

我有一个问题，我有一个HTML元素，其功能像是loding旋转器，我希望它不显示。我将使用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，因此在页面中看到一个按钮很奇怪加载。我认为可以在此处使用可观察变量和运算符，但我真的不知道该使用哪一个进行观察。谢谢。

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

解决方法

我相信您在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>