Проверьте, является ли переменная неопределенной с * ngIf

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

вы можете использовать !! для проверки допустимых значений. Вы можете увидеть объяснение !! здесь

<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

Я думаю, что это всегда неопределенно.Не определено во время ожидания, а также неопределенно или, возможно, пусто, когда возвращается в это состояние.Я думаю, что лучший способ быть более точным в том, что происходит:

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>

таким образом, вы не пытаетесь сделать выводсостояние сообщения, из какого рода фальси это может быть