Question

我对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

有什么建议吗？

Answer 1

我认为应该是

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

或

[attr.aria-labelledby]="'name' + trust.id"

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

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

1 个答案: