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

Question

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

这是一个简短的例子：

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

实际上 foo 的类型是 Foo: {id:string, name:string, value: number}

问题是，当我想在模板 IDE 中使用 foo 时，不知道 foo 有 ID、名称或值。

"cast" 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

Answer 2

在我的场景中，我必须填写一个table。所以我解决了这个问题，创建一个行组件，并将每个数组元素作为输入（类型化）属性传递，如。希望这对您有所帮助，也许您应该将此解决方案视为目前唯一正确的解决方案，因为接受的解决方案实际上并不能解决问题？

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

Using async pipe looses reference to object type

angular-pipe

angular