Angular 2将动态类分配给元素

Posted 2023-03-05

【中文标题】Angular 2将动态类分配给元素

【英文标题】：Angular 2 Assign dynamical Class to Element

【发布时间】：2017-03-22 22:12:53

【问题描述】：

我对 Angular 2 很陌生，我想为 html 元素分配一个类。 它应该是动态的 --> 如果另一个元素（带有 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>

使用此代码我得到一个错误...：/ 有人可以帮我吗？

非常感谢！

【问题讨论】：

预期结果是什么。 [class.glyphicon-minus] 表示您想要添加/删除类 glyphicon-minus 但我完全不清楚 "#a-i.aria-expanded='true'" 应该做什么。

如果 id 为 a-i（例如 a-0）的元素的“aria-expanded”属性为真，则应添加该类。

【参考方案1】：

您不能同时使用[] 和。一个或另一个，但不能两者兼而有之

当"true" 是返回true 的表达式时，这将设置类，否则将删除该类

[class.glyphicon-minus]="true"

这会在表达式 true 返回 true 时设置一个类 glyphicon-minus，否则会删除该类，并在第二个表达式返回 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>

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

【讨论】：

谢谢！但它仍然因失败而失败：'未处理的承诺拒绝：模板解析错误：解析器错误：缺少预期：在 ['glyphicon-minus': true, '#a-' + i + '.aria-expanded ': true] 在 ProgramComponent@28:104 (" ][ngClass]="'glyphicon-minus': true, '#a-' + i + '.aria-expanded': true" aria-hidden="true"> "): ProgramComponent@28:104'

第 33 列是什么？我找不到错误。我根据您在问题下方的评论更新了我的答案。

您更新的答案很好，它不会给出错误，但它有一个问题：因为 ''-Elemnt 在 ngFor 中，所以 '#aEle' 是重复的。 .. 我用整个 div 和 ngFor 更新了我的原始帖子......也许你也有解决方案......谢谢！

我认为整个方法是有缺陷的。为什么需要从<a> 元素中读取属性以了解“aria-expanded”是否设置为true，而不是读取aria-expanded 所依赖的属性？或者如果它总是正确的，就像在你的例子中一样，你为什么需要阅读它？

嗨，好的，我试着解释一下：当我点击一个按钮从 true 变为 false 时，'a'-Element 的 'aria-expanded' 属性发生了变化。基于此，我想显示一个带有“减号”类的跨度，但只是，如果“a”的“aria-expanded”属性为“true”......