Angular路由+Observable绑定ngtsc(2339)错误、详情卡片空白问题

问题根因 #

问题是两个基础用法错误叠加导致的，和严格类型校验本身无关，不需要特意关闭noImplicitAny配置：

1. 流返回值类型错误：Array.filter()方法返回的永远是匹配元素组成的数组，不是单个匹配对象。你在switchMap里直接返回filter的结果，导致selectedProduct这个Observable实际发出的值是Producto_interface[]（商品数组），不是你声明的单个Producto_interface对象。你之前console能打印出数据，是因为数组里确实存了匹配到的商品对象。
2. 模板async管道用法错误：你写的*ngIf="selectedProduct | async as Producto_interface"里，as关键字后面跟的是Observable解包后值的临时变量名，不是类型名。你后续绑定数据的时候全程直接访问selectedProduct这个Observable实例本身，Observable上根本没有Marca/Nombre这些商品属性，自然渲染为空，也会触发你看到的类型报错。

修复步骤 #

1. 修正组件TS代码 #

直接取匹配到的单个商品对象，补全空值处理，修正后代码如下：

// 记得从rxjs导入of工具函数
import { Observable, switchMap, of } from 'rxjs';

// selectedProduct类型加上null，兼容匹配不到商品的场景
selectedProduct: Observable<Producto_interface | null>;

ngOnInit() {
  this.selectedProduct = this.route.paramMap.pipe(
    switchMap(params => {
      const id = params.get('ID');
      // 用find直接取第一个匹配的商品，找不到返回undefined，比filter更适配当前场景
      const matchedProduct = this.productos.find(p => p.ID.toString() === id?.toString());
      console.log("匹配到的商品：", matchedProduct);
      return of(matchedProduct ?? null);
    })
  )
}

2. 修正模板HTML代码 #

给async解包后的值设置合法的变量名，后续所有属性绑定都用这个解包后的变量，不要直接访问Observable实例：

<!-- as后面跟自定义变量名product，不要写接口名 -->
<mat-card class="product-card" *ngIf="selectedProduct | async as product">
    <mat-card-subtitle>Marca: {{product.Marca}}</mat-card-subtitle>
    <mat-card-title>{{product.Nombre}}</mat-card-title>
    <mat-card-content>
        <p>Código interno: {{product.ID}}</p>
        <p>Sabor: {{product.Sabor}}</p>
        <p>Envase: {{product.Envase}}</p>
        <p>Línea: {{product.Linea}}</p> 
    </mat-card-content> 
    <button mat-raised-button routerLink="/crear-pedido" color="primary">Cerrar</button>
</mat-card>

补充说明 #

改完后类型检查会直接通过，不需要关闭noImplicitAny。你之前用selectedProduct['Marca']写法不报错，是因为字符串索引签名绕过了TS类型检查，相当于告诉TS“这个对象上任意属性都存在”，但实际访问到的值是undefined，所以页面渲染为空。

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