Angular

Question

我有一个问题，我有一个 HTML 元素，它就像一个 loding 微调器，我不希望它显示。我会使用可观察对象来仅在数据完全加载后才能加载该元素。到目前为止，在我的组件中，我是这样做的：

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 在我获取数据之前加载，所以在页面加载时看到一个按钮很奇怪。我认为可以在这里使用 observables 和运算符，但我真的不知道使用哪一个来完成这项工作。谢谢

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

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

Angular - 加载时显示图片

Angular - Image appears while loading

javascript

rxjs

typescript

rxjs-observables