角2要素への動的クラスの割り当て

Question

私は角2を新しくしました。クラスをHTML要素に割り当てたいと思います。 動的でなければなりません - > idを持つ別の要素に属性がある場合、この要素はクラスになります。

Here's私のコード私が試した：このコードで

<div class="panel panel-default" ngFor="let date of epgDates; let i = index"> 
    <div class="panel-heading" role="tab"> 
     <h4 class="panel-title"> 
      <a #aEle role="button" data-toggle="collapse" id="a-{{i}}" href="#{{i}}" aria-expanded="true"> 
       <span class="glyphicon" [class.glyphicon-minus]="aEle.getAttribute('aria-expanded')==='true'" 
        aria-hidden="true"> 
       </span> {{date | date: 'dd.MM.yyyy'}} 
      </a> 
     </h4> 
    </div> 
</div> 

を私はエラーを取得...：/ 誰かが私をここに助けることができますか？

ありがとうございます！

Answer 1

[]と{{}}を一緒に使用することはできません。一方または他方の両方ではなく

"true"が別途クラスこれはクラスglyphicon-minusを設定

[class.glyphicon-minus]="true" 

除去さtrueを返す式であるときは、このクラスを設定発現truetrue戻りは、そうでなければ、クラス2番目の式がtrueを返した場合は、#a-1.aria-expandedクラスを設定または削除します（iが1の場合）。 クラス名は、文字列（'glyphicon-minus'）または式（'#a-' + i + '.aria-expanded'）

[ngClass]="{'glyphicon-minus': true, '#a-' + i + '.aria-expanded': true}" 

true

発現をすることができ、（図示のように）リテラルブール値であるか、コンポーネントクラスのプロパティの名前、または演算子と関数呼び出しによる複雑な式。

更新

<a #aEle role="button" data-toggle="collapse" id="a-{{i}}" href="#{{i}}" aria-expanded="true"> 
    <span class="glyphicon" [class.glyphicon-minus]="aEle.getAttribute('aria-expanded')==='true'" aria-hidden="true"></span> 
    {{date | date: 'dd.MM.yyyy'}} 
</a> 

私は<a>に#aEleテンプレート属性を追加し、aria-expanded属性値を取得するためにそれを使用。