Typescript 处理异步管道渲染的 Observable 的正确方法

{
    "message": "https://images.dog.ceo/breeds/setter-english/n02100735_10064.jpg",
    "status": "success"
}

  getRandomImage(): Observable<Random> {
    return this.client.get<Random>(`https://dog.ceo/api/breeds/image/random`)
  }

<div>
  <p *ngIf=" random$ | async">{{ random$.message }}</p>
</div>

Property 'message' does not exist on type 'Observable<Random>'

getListFacts(length: number, limit: number) : Observable<facts[]> {
    return this.client
        .get<{ data: facts[] }>(`https://catfact.ninja/factsmax_length=${length}&limit=${limit}`)
        .pipe(map(({ data }) => data));
}

random$: Observable<RandomImage>;

constructor(private client: HttpClient) {
    this.random$ = this.client.get<RandomImage>(`https://dog.ceo/api/breeds/image/random`);
}

<p *ngIf="random$ | async as randomImage">{{ randomImage.message }}</p>

getListFacts(length: number, limit: number) : Observable<facts[]> {
    return this.client
        .get<{ data: facts[] }>(`https://catfact.ninja/factsmax_length=${length}&limit=${limit}`)
        .pipe(map(({ data }) => data));
}

Typescript相关问答推荐

如何推断类方法未知返回类型并在属性中使用它

参数类型undefined不能分配给参数类型字符串｜未定义

React router 6.22.3不只是在生产模式下显示，为什么？

为什么typescript不能推断类的方法返回类型为泛型''

打印脚本丢失函数的泛型上下文

Express Yup显示所有字段的所有错误

如何在另一个参数类型中获取一个参数字段的类型？

使用订阅时更新AG网格中的行

如何将v-for中的迭代器编写为v-if中的字符串？

如何在Typescript 中组合unions ？

如何过滤文字中的类对象联合类型？

在Cypress中，您能找到表格中具有特定文本的第一行吗？

类型脚本-处理值或返回值的函数

是否可以通过映射类型将函数参数约束为预定义类型？

如何通过属性名在两个泛型数组中找到匹配的对象？

如何在打字角react 式中补齐表格组

如何使函数参数数组不相交？

在打印脚本中将对象类型转换为数组

我可以使用JsDocs来澄清Typescript实用程序类型吗？

为什么将有效类型传递给类型化数组构造函数会生成错误