Question

我是Angular 2的新手，我想为HTML-Element分配一个类。它应该是动态的 - ＆gt;如果另一个元素（具有id）具有属性，则该元素应该成为类。

这是我试过的代码：

<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"。无论是其中之一还是两者都不是

当true是一个返回[class.glyphicon-minus]="true"的表达式时，这会设置类，否则将删除该类

glyphicon-minus

当表达式true返回true时，这会设置一个类#a-1.aria-expanded，否则在第二个表达式返回{{1时删除该类并设置或删除类true否则将其删除（假设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>

我将#aEle模板属性添加到<a>并使用它来获取aria-expanded属性值。

Angular 2将动态类分配给Element

1 个答案: