angular - 在 Angular 8 中显示 null 的可观察属性

Question

我有以下组件

import { Component, OnInit } from '@angular/core';
import { DataService } from '../Services/data-service';
import { Observable } from 'rxjs';
import { ShowItem } from '../Models/show-item';

@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.scss']
})
export class ShowComponent implements OnInit {

  public showString:Observable<ShowItem>;

  constructor(public datasource:DataService) { }

  ngOnInit() {
    this.getShow();
  }

  getShow()
  {
    this.showString = this.datasource.getShow();

    this.showString.subscribe(m=>{console.log(m);});

  }

}

以及以下 View

<p>show works!</p>
<p> {{showString|async|json}}</p>

这将显示以下内容

show works!

{ "imageUrl": "testimage1.jpg", "showId": "063acbab-66d4-4459-882c-da26625b02ab" }

但是如果我将 View 更改为

<p>show works!</p>
<p>{{showString.imageUrl|async|json}}</p>

我明白

show works!

null

viewModel如下

export class ShowItem {
    public imageUrl:string;
    public showId:string;
}

为什么对于明显存在的属性我会得到 null？

Answer 1

async 解析后，您需要访问 imageUrl 属性。

<p>show works!</p>
<p>{{(showString|async)?.imageUrl}}</p>

注意安全导航操作符 (?.)；这将避免在 async 调用解析之前尝试访问 imageUrl 属性时模板上出现任何错误。

此外，|json 管道也被删除，因为 imageUrl 属性是 string