Angular 12 Async Pipe报错：Property 'selectedFish' does not exist on type 'string'

核心原因 #

报错提示fish的类型是string，说明模板类型检查识别到fishData$ | async返回的结果是字符串类型，而非你定义的Fish类类型，核心有3种常见触发场景：

• 组件内fishData$的类型声明错误，比如误写为Observable<string>，未声明为Observable<Fish>
• fishData$实际发射的值就是JSON字符串：比如你在Observable上游对返回结果做了多余的JSON.stringify操作，或是调用接口时指定了responseType: 'text'，未做JSON解析。这里需要注意：json管道会自动序列化输入值，哪怕输入是JSON字符串，最终渲染结果也会和对象序列化结果高度相似，很容易误导你认为返回值是对象类型
• Angular严格模板类型检查推断异常：如果fishData$未声明明确类型，或是依赖的上游类型定义不清晰，模板类型检查可能会错误推断返回值为string

解决方案 #

1. 修正fishData$的类型声明
   首先确认组件内的fishData$声明正确：

import { Observable } from 'rxjs';
import { Fish } from './你的Fish类路径';

// 正确声明类型
fishData$: Observable<Fish>;

如果是调用HTTP接口获取数据，确保指定返回类型：

this.fishData$ = this.http.get<Fish>('你的接口地址');

2. 校验实际返回值类型
   在组件内临时加订阅打印，确认返回值的实际类型：

this.fishData$.subscribe(val => {
  console.log('值类型：', typeof val);
  console.log('实际值：', val);
});

如果打印的typeof val为string，说明上游返回的是JSON字符串，在上游处理逻辑中添加JSON.parse将字符串转为对象即可。

3. 模板内类型断言（临时兼容方案）
   如果是类型检查推断异常，可以在模板内添加类型断言绕开检查：

<ng-container *ngIf="(fishData$ | async) as fish">
  <!-- 方案1：用$any绕开类型检查 -->
  {{ $any(fish).selectedFish }}
  <!-- 方案2：显式断言为Fish类型 -->
  {{ (fish as Fish).selectedFish }}
</ng-container>

内容的提问来源于stack exchange，提问作者user16444670