Question

我希望能够使用模板表达式控制视频属性。以下模板（摘录）给出了模板解析错误Unexpected closing tag "video"：

<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属性？

Answer 1

您正在以错误的方式使用绑定。

要设置属性，只需使用[attr.attrName] =“expression”作为下面的内容：

<video [attr.controls]="myVideo.controls">
  <source [attr.src]="myVideo.src" type="video/mp4">
  Video not supported.
</video>

您可以获得更多信息here

角度2模板中的布尔属性

1 个答案: