angular - 使用异步管道会丢失对对象类型的引用

Question

我有一个简单的问题。当我在模板 IDE 中使用异步管道时，不知道异步管道中的对象是什么类型。

这是一个简短的例子:

  <ng-container *ngIf="(state$ | async).foo as foo">

实际上 foo 的类型是 Foo: {id:string, name:string, value: number}
问题是，当我想使用 foo 时在模板 IDE 中，不知道 foo 具有 id、名称或值。

有什么干净的解决方案可以“转换” foo至 Foo ?

Answer 1

as foo语句是创建一个不用于转换的模板变量，如果你像这样使用

   <ng-container *ngIf="(state$ | async).foo.id">

您将获得类型智能感知，但是当您创建模板变量时，此信息似乎丢失了。

这认为是一个错误，将来可能会解决。

<ng-container *ngIf="($state | async) as foo">
    {{foo | json}}
    <div>
        {{foo.id}} <!-- foo has no type information-->
    </div>

  {{value.name}} <!-- declared property has type information-->
</ng-container>

stackblitz demo