角2模板中的布尔属性
问题描述:
我希望能够使用模板表达式控制视频属性。下面的模板(节选)是给我一个模板解析错误Unexpected closing tag "video"
:角2模板中的布尔属性
<video {{ myVideo.controls ? 'controls' : '' }}>
<source src="{{ myVideo.src }}" type="video/mp4">
Video not supported.
</video>
我也尝试了包括属性的字符串,这给了我一个InvalidCharacterError
因为'{{' is not a valid attribute name
:
<video {{ myVideo.attributes }}>
我新来Angular,我正在使用Angular 2.看来,模板表达式绑定到一个属性,例如属性或事件。因此,<source src="{{ myVideo.src }}">
可能工作,因为表达式绑定到src
属性,但<video {{ myVideo.attributes }}
不是因为没有要绑定的属性?所以表达式不被评估,这将与InvalidCharacterError
一致?我在这里猜测。那么我怎样才能让这个表达式绑定到video
元素?
请注意,(据我所知)controls
,autoplay
等是布尔属性,这意味着它们必须被包括或省略,而不是分配的值。所以,以下预期可能解析模板,但不起作用,打开或关闭controls
属性:
<video controls="{{ myVideo.controls }}">
可能是我这个问题的解释是完全错误的。无论如何,如何在Angular 2模板中有条件地包含布尔属性,例如视频controls
属性?
答
您正在以错误的方式使用绑定。
要设置一个属性,只需使用[attr.attrName] =“表达”作为一个没有波纹管:
<video [attr.controls]="myVideo.controls">
<source [attr.src]="myVideo.src" type="video/mp4">
Video not supported.
</video>
你可以有更多的信息here
第一个版本工作得很好,用' [controls] =“myVideo.controls”',谢谢。 – jmilloy