问题标签 [angular-ng-class]

我有以下 html 片段

和

当我单击一个或多个特定报告然后选择一种语言时，我需要将类 bgColor 添加到没有该语言的一个或多个报告中。

示例：我有 3 份报告：报告 1（英语）、报告 2（西班牙语）、报告 3（英语、法语）

和 3 种语言：英语、西班牙语、法语

如果我检查报告 1和报告 2分别仅提供英语和西班牙语版本，并从下拉列表中选择语言英语 ，则需要将bgColor 类添加到报告 2，因为它在所选语言中不可用，在此案例英文。如果我检查Report 1和Report 3并且选择了语言西班牙语，则需要将类bgcolor添加到 Report 1 和 Report 3元素中。如果选择了英语，该类将不会添加到任何元素中，因为两者都有英语。最重要的是，无论检查哪个报告，如果它在所选语言中不可用，则将添加 bgColor 类。如果它是可用的类将不会被添加。可以随意检查或取消检查报告。

以下是打字稿片段

在我当前的实现中，当检查报告 1 并选择语言英语时，不添加 bgColor 类。但是，如果选择了英语以外的语言，例如西班牙语，则 bgColor 类将添加到所有报表元素中，即使只选中了报表 1。再次保持 Report 1 被选中并且语言选择为西班牙语，如果 Report 2 现在被选中，类 bgColor 将从所有元素中删除，尽管该类应该添加到 Report 1 元素中。我尝试了很多不同的方法，但仍然无法提出解决方案。对此的任何帮助将不胜感激。

在经历了很多问题之后，我决定问这个......角度 [ngClass] 在 10 、 24 、 100 的值上工作很奇怪。我不知道背后的原因。希望大家可以帮忙...

这是来自后端的 JSON 格式

ngClass 在 10、100、24 等值上选择了错误的类，而不是 greenn，它以红色显示背景。

I have two anchor tags

.ts

When I click on anchor tag it throws an error

ExpressionChangedAfterItHasBeenCheckedError

It was working,but due to update any module by a team member it stopped working,

I have googled a lot but could not get it working

Please help

Thanks

我正在尝试根据数组中存在的值更改 [ngclass] 字段的值，但它没有按预期工作。html代码如下：

在上面的代码uniqueIds中是一个数组，填充如下：

当我在控制台中看到唯一的 li id 时，打印如下：

当我检查 html 代码时，会显示以下内容：

谁能帮我在 Angular 6 中解决这个问题？我无法更改 ngclass 的值。到目前为止，我已经尝试了以下解决方案：

但以上都不适合我。

我创建了一个angular component被调用的app-button.

template看起来像这样：

在控制器中，我定义了两个名为and的@Input变量：modifiertext

在template第二次component调用sample-page中，我正在重用我component app-button这样的：

目前，我得到了一个HTML button我的默认值text Default button，所以它工作正常。

现在我正在尝试使用我的两个@Input变量modifier和text.

首先，如果我传递一个值，我会添加第二个类modifier：

我尝试了两种方式：

1.）class直接在条件template中添加第二个：app-buttonngClass

2.)在调用中class直接添加第二个：templateapp-buttonngClassfunctioncontroller

模板：

控制器：

这两个想法都不能通过class使用value传递的modifier string.

文本的第二个问题

button text我也有一个问题是通过传递一个值来覆盖默认值@Input text：

我有关注console error：

希望我的两个问题很清楚。

如果我单击该按钮，它会将颜色更改为橙​​色，但要求是单击相同的按钮后，它需要更改为默认颜色。所以请指导我这样做。

组件.ts

首先，我对 Angular 世界很陌生。试图完成一项任务。我真的很感激所有的投入。来到这个问题。

我正在使用“ngFor”创建多个扩展面板。我只想突出显示或更改用户选择的面板的样式表。其余所有面板都应具有默认样式表。当用户单击第二个面板时，它应该突出显示第二个面板并将第一个面板重置为默认值。

“ngFor 循环”是一个组件，它与另一个组件中的“垫子扩展面板”交互。因此，当用户单击另一个面板时，我发现很难重置先前突出显示的面板。

我使用了“css 风格 - 焦点”，它很有魅力。但问题是，即使我单击屏幕上的任意位置，css 样式也会设置为默认值。我只希望当用户选择其他面板时它应该重置。

我还尝试找到以前的元素和当前元素，并根据尝试更改样式进行比较。它正在工作，但如果用户选择第二个面板，我将无法重置。两者都被突出显示。

这是第一个组件 HTML：

这是垫扩展面板组件 html ：

加载页面时，它会使用默认样式表加载所有面板。现在，当使用选择任何面板时，它应该突出显示该面板并在用户选择另一个面板时重置。

我有两个链接，在单击相应链接时显示两个不同的图像。第一个行为很好，但是当我再次单击所选链接时，图像显示正确，但悬停正在移动到另一个链接。我的意思是它显示选择的第二个链接。这是我到目前为止所做的。

有人可以帮助我做错什么吗？

this.toogleClick是真的

想象以下情况：

所有这些 CSS 类cSmall, cGray, cTab1都依赖于!first.

我可以避免在以下范围内不必要的重复：

我已经尝试{ [cSmall,cGray,cTab1]: !first }过但没有成功:)

我有一个来自 Angular [ngClass] 指令的表达式字符串，其中包含多个表达式，它们的对应键用逗号分隔。

当我尝试使用 .split(',') 函数将上述表达式字符串拆分为单个表达式的数组时，它会在各个表达式之间进行拆分。

代码：

输出：

预期结果：

我尝试构建正则表达式来提取单个表达式，但只能使用以下正则表达式提取表达式键

正则表达式：

提取上述预期模式的正则表达式是什么