问题标签 [angular-ng-class]

我正在使用 Angular 4+。请注意： first 和 last 需要基于类实例，而不是元素。所以 ngFor 中的 let first = first 是行不通的。我目前导入了 jQuery 来处理这个问题，但想看看是否有办法不使用 jQ。

在组件 ts 文件中：

在 HTML 文件中：

现在我想要做的是获取一个类的第一个实例和最后一个 - 一旦我拥有它，我想设置它的样式或将一个类添加到行中。例如在 jQuery 中我会这样做：

这里执行了一个 kpiName 循环，并且还执行了 subRegion 的内部循环。
结果，创建了 4 个 div，class="col-xs-2"并在其中创建了两个 div（过滤器类中的可点击 div），它们具有动态 Id id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}" ，onclick 调用某个函数。

要求是当id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}"点击相应的显示和隐藏时id="filteredDataSubRegion{{index}}"，id="filteredDataProductLine{{index}}"对应的4个div（a，b，c，d）。

app.component.ts

app.component.html

我正在关注模板语法部分，以从这里https://v4.angular.io/guide/template-syntax#ngclass应用内置属性和结构指令

根据上面的 Angular 文档，我将 currentClasses 添加到我的 html 中：

在浏览器的控制台上，我收到以下错误：

错误：模板解析错误：无法绑定到“ngclass”，因为它不是“div”的已知属性。

我也尝试了 ngStyle 和 ngIf 但得到了相同的错误代码。

我的 app.module.ts 包括 Common Module 因为这是一些答案中建议的解决方案 - 但这对我没有帮助：

在遵循对类似问题的其他一些答案之后，我无法独自完成这项工作。

我正在使用 Angular 4.4.6 和 webpack 进行编译。

非常感谢您的帮助。

我想在单击时为 li 元素添加背景颜色，但是当我单击另一个 li 元素时，之前的 li 元素背景颜色保持不变。

组件.html

组件.ts

我正在尝试将“活动”类添加到单击的所有 div（在这种情况下为选项）并在第二次单击时删除该类。

选项计数可能因 ngFor 生成而异。

HTML

TS

以下静态 html<ul>下拉列表（样式包括在下面）完美运行。现在我正在尝试<li>使用*ngFor*and将其转换为 Angular 5 动态ngClass。

Angular 版本看起来像这样，但我无法<a href>在加载时显示顶部标志（也无法在我重新选择语言时）。

如果您查看下面的屏幕截图，您会看到我的初始标志没有显示在<ul>它所说的位置的顶部US。我想我应该处理这个问题，@ViewChild()但我不确定 - 或者也许是@HostBinding().

我有一个包含 TS 文件的组件，其中包含此部分：

然后，我的 HTML 文件中有一个 div 使用 ngClass，如下所示：

其中“可见”是我的 TS 文件中单击按钮时设置（或取消设置）的布尔值。当我单击按钮时，我可以看到“打开”类被正确应用和删除。但是，没有添加该类附带的其他样式。

一切似乎都是应有的，但没有添加额外的样式。我可以在 Chrome 开发人员工具中看到原始内容，并且看到正在添加的类，但样式没有改变。

有任何想法吗？

显然，我在 SASS 文件中的错误位置添加了额外的类。我有这样的：

我认为“开放”类会覆盖它所做的其他东西，但前提是我将它放在“.nav-menu-fixed”之外。

所以现在它在 Chrome 中运行良好。它也适用于 Firebox，但位置看起来与 Chrome 中的不同（字体大小也不相同）。而在 Edge (IE) 中，它根本不起作用。我什至不认为菜单组件（或至少包含要单击的项目的部分）甚至被渲染，因为我在源代码中根本看不到它。

如果条件为真，我正在使用 ngClass (Angular 2) 加载一个类字符串，如果条件为假，则加载其他类字符串！

这是代码：

没有问题（但与 ngClass 中的第一部分代码相同）： 第二部分在条件value!=2和要加载的类字符串的情况下运行良好btn btn-outline-success m-btn m-btn--pill

问题： 条件value==2和要加载的类字符串的第一部分是，btn btn-success m-btn m-btn--pill但唯一加载的类（在字符串中的许多可用类中）是btn-success.

我无法理解为什么 ngClass 只加载一个类而将其他类留在字符串中！

如果我做错了什么或者它是 Angular 2 中的错误，有人可以告诉我吗？

我正在尝试根据单击的图像在模板中动态设置图像的类。正如过去所示，我已经准确地使用了它，它当时有效，但在这种情况下不起作用。

选择图像的模板代码：

设置类的组件方法：

背景我有一个标题组件，其 [ngClass] 附加到顶部 div。

问题是否可以在评估 [ngClass] 之前延迟显示页面？我们曾经在 AngularJs 中有 ng-cloak。我们在 Angular 中有类似的东西吗？

为什么需要它这将帮助我避免不希望的闪烁效果。

标题模板