Angular 2のHTMLタグで同じ変数を2回使用することはできませんか？

Question

私はAngular 2に奇妙な問題があります - おそらくバグですか？ - 同じHTMLタグ内でテンプレート内の同じ変数を2回印刷できない場所。

以下のコードは、判読不能なエラーを示しています。

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

、コードの第一及び第二のブロックとの間の唯一の違いは、第二の、作業ブロックに、私は2つのHTMLに{{trust.id}}への第2の参照を削除したことですタグ。

以下

はエラー...

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" 

されるべきだと思います。