Angular 检查变量是否未定义为*ngIf

关于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>

---

您可以使用

检查有效值。您可以看到

的解释


帖子内容
找不到帖子
装货桩
我认为它总是未定义的。等待时未定义，在该状态下返回时也未定义或可能为null。我认为最好的办法是更明确地说明正在发生的事情：

ts

html


帖子内容
找不到帖子
装货桩

通过这种方式，您不会试图推断帖子的状态，因为它可能是哪种虚假的
post
已在初始的
ng容器中评估为truthy/falsy。如果
post
解析为
undefined
，则将显示
ng模板加载器。您当前的逻辑将永远不会显示
ng template#empty
。如果返回值
未定义
，我建议您使用
map
更改它，然后在后续的
*ngIf
中检查它


组件

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

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

导出类AppComponent实现OnInit{
post$：可观察的；
恩戈尼尼特（）{
this.post$=of（未定义）.pipe(
延迟（2000年），
映射（=>typeof===“未定义”？“未找到”：
);
}
}

模板

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


帖子内容
找不到帖子
装货桩
可能是因为
post$
也没有定义，这会导致异常。检查你的浏览器控制台，是否有错误消息？可观察的已定义…等等，我明白了
post
已在初始
ng容器中评估为truthy/falsy。如果
post
解析为
undefined
，则将显示
ng模板加载器。这使得并且我看不到您的逻辑有任何方式显示
ng template#empty
。那么，在加载后，我如何检查作业是否已定义，以便显示未找到消息？这就是为什么我有2个ngIfI将返回除
未定义
以外的内容，或者在服务器上不存在帖子的情况下，使用
映射
分配除
未定义
以外的内容。它不起作用。。。装载机仍然没有消失。
loading = false;
post;

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

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

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>