Javascript 不能在带有Angular 2的单个HTML标记中使用同一变量两次？

我对Angular 2有一个奇怪的问题-可能是一个bug在同一HTML标记中，我不能在模板中打印同一变量两次

下面的代码给出了无法识别的错误

  <div class="panel panel-default" *ngFor="let trust of trusts">
      <div class="panel-heading" role="tab" id="name{{trust.id}}">
          <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{trust.id}}" aria-expanded="true" aria-controls="collapse{{trust.id}}">
                  {{trust.name}}
              </a>
          </h4>
      </div>
      <div id="collapse{{trust.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="name{{trust.id}}">
          <div class="panel-body">
              TBC
          </div>
      </div>
  </div>

未完待续

而这段代码工作得很好

  <div class="panel panel-default" *ngFor="let trust of trusts">
      <div class="panel-heading" role="tab" id="name{{trust.id}}">
          <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{trust.id}}" aria-expanded="true" aria-controls="collapse1">
                  {{trust.name}}
              </a>
          </h4>
      </div>
      <div id="collapse{{trust.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="name1">
          <div class="panel-body">
              TBC
          </div>
      </div>
  </div>

未完待续

您可以清楚地看到，第一个代码块和第二个代码块之间的唯一区别是，在第二个工作块中，我删除了两个HTML标记中对{{trust.id}的第二个引用

下面是错误

consoleError — zone.js:420Unhandled Promise rejection: (8)
"Template parse errors:
Can't bind to 'aria-controls' since it isn't a known property of 'a'. (\"\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse{{trust.id}}\" aria-expanded=\"true\" [ERROR ->]aria-controls=\"collapse{{trust.id}}\">
                      {{trust.name}}
                  </a>
\"): AppComponent@90:139
Can't bind to 'aria-labelledby' since it isn't a known property of 'div'. (\"</h4>
          </div>
          <div id=\"collapse{{trust.id}}\" class=\"panel-collapse collapse\" role=\"tabpanel\" [ERROR ->]aria-labelledby=\"name{{trust.id}}\">
              <div class=\"panel-body\">
                  TBC
\"): AppComponent@95:83"
"; Zone:"
"<root>"
"; Task:"
"Promise.then"
"; Value:"
SyntaxError
"BaseError@http://localhost:4200/vendor.bundle.js:64381:20 [<root>]
SyntaxError@http://localhost:4200/vendor.bundle.js:5720:21 [<root>]
parse@http://localhost:4200/vendor.bundle.js:17586:82 [<root>]
_compileTemplate@http://localhost:4200/vendor.bundle.js:47577:73 [<root>]
forEach@[native code] [<root>]
_compileComponents@http://localhost:4200/vendor.bundle.js:47460:26 [<root>]
createResult@http://localhost:4200/vendor.bundle.js:47342:37 [<root>]
run@http://localhost:4200/polyfills.bundle.js:5990:49 [<root> => <root>]
http://localhost:4200/polyfills.bundle.js:6412:60 [<root>]
runTask@http://localhost:4200/polyfills.bundle.js:6028:57 [<root> => <root>]
drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:6310:42 [<root>]
promiseReactionJob@[native code] [<root>]"
consoleError — zone.js:420
_loop_1 — zone.js:449
drainMicroTaskQueue — zone.js:453
promiseReactionJob
consoleError — zone.js:422
Error

consoleError-zone.js:420未处理的承诺拒绝：（8）
“模板分析错误：
无法绑定到“aria控件”，因为它不是“a”的已知属性。（\“\”数据切换=\”折叠\“数据父级=\”\“\”手风琴\”href=\“\”折叠{{{trust.id}}\”aria扩展=\”true\“[错误->]aria控件=\”折叠{{{trust trust.id}\”>
{{trust.name}
\"): AppComponent@90:139
无法绑定到“aria labelledby”，因为它不是“div”的已知属性。(\"
]aria labelledby=\“name{{{trust.id}}\”>
未完待续
\"): AppComponent@95:83"
"; 区域：“
""
"; 任务：“
“答应我，然后”
"; 值：“
语法错误
"BaseError@http：//localhost:4200/vendor.bundle.js:64381:20[]
SyntaxError@http：//localhost:4200/vendor.bundle.js:5720:21[]
parse@http：//localhost:4200/vendor.bundle.js:17586:82[]
_compileTemplate@http：//localhost:4200/vendor.bundle.js:47577:73[]
forEach@[本机代码][]
_compileComponents@http：//localhost:4200/vendor.bundle.js:47460:26[]
createResult@http：//localhost:4200/vendor.bundle.js:47342:37[]
run@http：//localhost:4200/polyfills.bundle.js:5990:49[=>]
http://localhost:4200/polyfills.bundle.js:6412:60 []
runTask@http：//localhost:4200/polyfills.bundle.js:6028:57[=>]
drainMicroTaskQueue@http：//localhost:4200/polyfills.bundle.js:6310:42[]
PromiseActionJob@[本机代码][]”
consoleError-zone.js:420
_loop_1-zone.js:449
drainMicroTaskQueue-zone.js:453
激励工作
consoleError-zone.js:422
错误

有什么建议吗？

我想应该有

attr.aria-labelledby="name{{trust.id}}"

或

使其成为属性绑定，而不是属性绑定。

我认为应该是

attr.aria-labelledby="name{{trust.id}}"

或

---

使其成为属性绑定，而不是属性绑定。

您是否愿意至少分享一点这些无法解释的错误？也许有人可以破译它们。：@toskv是的！我本打算这么做的，对不起。@toskv错误现在包含在主帖子中-事实证明，评论太长了。您愿意至少分享一点吗可解释的错误？也许有人可以解释。：@toskv是的！我本打算这么做的，对不起。@toskv错误现在包含在主要帖子中-结果是评论太长了。这很有效，谢谢。你能解释为什么某些属性需要这样做，而其他属性不需要这样做吗？我不会将其用于id=“name{{trust.id}”“等等。只是Angular自动识别某些属性，而不是其他属性？我真的应该使用attr.id=“name{{{{trust.id}}”？属性是预定义的，属性是任意的。某些属性和属性是相互连接的，并相互反映值（实际上，许多甚至大多数属性都具有匹配的属性）。有一些例外情况，如

，其中

的属性名
反映到
的属性
htmlFor
-可能是因为
for
是一个JS关键字）一些更有效的解释（可能会有更好的解释），谢谢。你能解释为什么某些属性需要这样做而其他属性不需要这样做吗？我不把它用于id=“name{{{trust.id}}”和其他。只是Angular自动识别某些属性，而不是其他属性？我真的应该使用attr.id=“name{{{{trust.id}}”？属性是预定义的，属性是任意的。某些属性和属性是相互连接的，并相互反映值（实际上，许多甚至大多数属性都具有匹配的属性）。有一些例外情况，如
，其中
的属性名
反映到属性
htmlFor
-可能是因为
for
是一个JS关键字）更多的解释（可能会有更好的解释）