我正在做一个Angular项目(Angular 4.0.0),我在绑定一个抽象类的属性到ngModel时遇到了麻烦,因为我首先需要将它转换为它实际上是的具体类,以便访问该属性。
也就是说,我有一个AbstractEvent类,它有一个具体的实现Event,它有一个布尔属性'acknowledged',我需要通过ngModel进行双向绑定,用复选框设置。
我的DOM中有这个元素:
<input type="checkbox" *ngIf="event.end" [(ngModel)]="(event as Event).acknowledged"
[disabled]="(event as Event).acknowledged">
很遗憾,这会引发以下错误:
未捕获错误:模板分析错误:分析器错误:在[(event as Event).acknowledged]中的第8列缺少预期)
我在谷歌上搜索了一下,发现这可能是因为在模板中使用as不支持它,尽管我不确定这一点。
我也不知道如何在我的typescript文件中为它编写一个函数来驱动模板,因为这会破坏我所需要的ngModel上的双向绑定。
如果任何人有任何方法来解决这个问题或执行类型铸造角模板正确,我会非常感激!
9条答案
按热度按时间x8diyxa71#
如果你不关心类型控制。
Angular8及更高版本
来自官方文件:https://angular.io/guide/template-typecheck#disabling-type-checking-using-any
zpjtge222#
这是不可能的,因为
Event
不能从模板中引用。(模板绑定表达式中也不支持
as
)您需要首先使其可用:那这个应该能行
更新
然后用它作为
hyrbngr73#
这个管道可以用来从各种输入中获取类型。它可以很好地与类、命名类型/接口和原语一起工作。
_type
参数未使用,但主要用于以下目标:从构造函数/变量推断类型。可用作:
需要严格的模板和常春藤。
yrwegjxp4#
如前所述,使用准系统方法调用会对性能产生影响。
一个更好的方法是使用管道,你可以两全其美。只需定义一个Cast管道:
然后在模板中,当需要转换时使用
event | cast
。这样,更改检测保持高效,并且键入是安全的(当然,假定所请求的类型更改是合理的)。
不幸的是,由于
name
属性的存在,我没有找到一种方法来实现这种泛型,因此必须为每种类型定义一个新的管道。e1xvtsh35#
*使用 TypeSafe 泛型answer:
*受smnbbrv answer启发,当没有地方可以推断类型时,将类型显式传递为可选参数。
用法:
pu82cl6c6#
要扩展@smnbbrv的答案,可以对接口使用类似的语法,如下所示:
这需要我们提供一个正确类型的“baseItem”。然而,我们不需要实际创建项,我们只需要声明它(因为项可以是未定义的)。这意味着我们可以在我们的类中创建一个建议类型的变量,如下所示:
注意,我们没有给
baseItem
赋值,我们只是指定它的类型,如果你启用了strictPropertyInitialization
,你需要给你的baseItem
添加一个非空Assert然后可以在模板中按如下所示使用该属性:
u0sqgete7#
还可以创建返回类型 predicate 的函数。
app.component.html
app.component.ts
这将把模板变量
foo
强制转换为Foo
类型,并将禁止任何关于联合类型的strictTemplate错误。daupos2t8#
免责声明!我是ng-as Angular库的作者,该库具有用于类型转换模板变量的管道和指令。
定向铸造,例如:
用管道铸造,例如:
管道来源:
指令来源:
更多信息:https://www.npmjs.com/package/ng-as
x6492ojm9#
Angular仍然不支持这一点。你可以创建一个自定义管道或一个函数来进行类型转换。
或者您可以使用以下语法将其转换为'any':$any()。
示例:
参考文件:https://angular.io/guide/template-typecheck