Angular组件中如何通过索引访问BehaviorSubject中的索引类型？

问题重现 #

你在Angular组件中使用BehaviorSubject管理带索引的字典集合，期望在模板中通过索引访问并支持异步更新，但模板中直接访问myContentBehavior[name]触发了TypeScript错误：

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'BehaviorSubject<Dictionary>'

组件代码（修正了部分类型拼写/匹配问题）：

interface Dictionary<T> {
    [key: string]: T;
}

interface Biscuit {
     name: string;
     cost: number; // 统一字段名，避免与实例定义不匹配
}

export class MyComponent {
      public myContent: Dictionary<Biscuit> = {};
 
      public myContentBehavior = new BehaviorSubject<Dictionary<Biscuit>>({});

      public myListBehavior = new BehaviorSubject<Array<Biscuit>>([]);

      public biscuitNames: string[] = []; // 显式指定类型，增强类型检查

      constructor() {
          const bourbon = {name: "bourbon", cost: 0.5};
          const hobnob = {name: "hobnob", cost: 0.8};

          this.myContent["bourbon"] = bourbon;
          this.myContent["hobnob"] = hobnob;

          this.myContentBehavior.next(this.myContent);
          this.myListBehavior.next([bourbon, hobnob]);
          this.biscuitNames = [ "bourbon", "hobnob" ];
      }
}

模板中的错误用法：

<div *ngFor="let name of biscuitNames">
    <p>Behaviour cost: {{ myContentBehavior[name].cost | async}} </p>
</div>

错误原因 #

• myContentBehavior是BehaviorSubject实例，本身并非字典对象，你不能直接在它上面用索引访问，只有通过async管道订阅后，才能获取到它内部存储的字典值。
• 你把async管道放在了索引访问之后，顺序错误，导致TypeScript无法正确推导类型。

解决方案 #

方法1：调整async管道的执行顺序 #

先通过async管道获取BehaviorSubject的字典值，再进行索引访问：

<div *ngFor="let name of biscuitNames">
    <p>Collection cost: {{ myContent[name].cost }}</p>
    <p>Behaviour cost: {{ (myContentBehavior | async)[name].cost }}</p>
</div>

• 用括号包裹(myContentBehavior | async)确保先执行异步订阅，拿到字典值后再通过[name]索引访问对应元素的cost字段。
• TypeScript会自动推导字典的类型，避免"any"类型错误。

方法2：使用as语法缓存异步值（更清晰） #

如果需要多次访问同一个异步字典值，可以用*ngIf的as语法缓存结果，避免重复订阅：

<div *ngFor="let name of biscuitNames">
    <ng-container *ngIf="myContentBehavior | async as biscuitDict">
        <p>Behaviour cost: {{ biscuitDict[name].cost }}</p>
    </ng-container>
</div>

• 这种写法更易读，尤其在需要多次使用异步字典的场景下，能减少不必要的订阅操作。

额外类型优化 #

为了避免类型推导问题，建议给biscuitNames显式指定string[]类型，同时确保Biscuit接口的字段和实例定义完全一致（比如统一用cost而非price）。

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