Question

我在Angular 7应用程序中具有以下内容：

<ng-container *ngIf="(post$ | async) as post; else loader">
  <div *ngIf="post; else empty">
    Post content
  </div>
</ng-container>
<ng-template #empty>
  Post not found
</ng-template>
<ng-template #loader>
  Loading post
</ng-template>

定义了帖子后，效果很好...

但是，当post未定义时，“未找到帖子”不会显示...

...我只是看到正在消失的载入消息。

我想念什么？

更新

post $在组件中的定义如下：

注意：post $不是数组。请参见代码中的 envelope.result [0] 。

export class PostDetailComponent implements OnInit {

  @Input() postId: number;

  post$: Observable<PostDetailModel>;

  constructor(private postService: PostService) { }

  ngOnInit() {

    this.post$ = this.getPost();

  }

  getPost(): Observable<PostDetailModel> {

    return this.postService.getByPostId(this.postId).pipe(

      map((envelope: Envelope<GetByPostIdResponse>) => envelope.result[0]),

      map((response: GetByPostIdResponse) => {

        return response == null ? null : {
          id: response.id,
          title: response.title
          // other properties
        };

      }));

  }

Answer 1

post在开头的ng-container中已经被评估为“真/假”。如果post解析为undefined，则将显示ng-template #loader。您当前的逻辑将永远不会显示ng-template #empty。我建议您使用map更改返回的值（如果它是undefined，然后在后续的*ngIf中进行检查。

stackblitz

组件

export class AppComponent implements OnInit {
  post$: Observable<any>;

  ngOnInit(){
    this.post$ = of(undefined).pipe(
      delay(2000),
      map(_ => typeof _ === 'undefined' ? 'NotFound' : _)
    );
  }
}

模板

<ng-container *ngIf="(post$ | async) as post; else loader">
  <div *ngIf="post !== 'NotFound'; else empty">
    Post content
  </div>
</ng-container>
<ng-template #empty>
  Post not found
</ng-template>
<ng-template #loader>
  Loading post
</ng-template>

Answer 2

您可以使用!!检查有效值。您可以看到!! here

的说明

<ng-container *ngIf="(post$ | async) as post; else loader">
      <div *ngIf="!!post; else empty">
        Post content
      </div>
    </ng-container>
    <ng-template #empty>
      Post not found
    </ng-template>
    <ng-template #loader>
      Loading post
    </ng-template>

Answer 3

我认为它总是不确定的。等待时未定义，返回到该状态时也未定义或为null。我认为是最好的方式来更清楚地表明正在发生的事情：

ts

loading = false;
post;

getPost() {
   this.loading = true;
   this.postService.getPost().subscribe(post => {
      this.loading = false;
      this.post = post;
   });
}

html

<ng-container *ngIf="!loading; else loader">
  <div *ngIf="post; else empty">
    Post content
  </div>
</ng-container>
<ng-template #empty>
  Post not found
</ng-template>
<ng-template #loader>
  Loading post
</ng-template>

这样，您就不会试图推断帖子的状态

使用* ngIf

3 个答案: