Question

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

。

这是一个简短的示例：

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

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

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

是否有任何干净的解决方案将“ foo“投射”到Foo？

Answer 1

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

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

您将得到intellisense类型，但是在创建模板变量时，该信息似乎丢失了。

这是一个bug，可能会在将来解决。

<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

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

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

2 个答案: