角: ngClass条件停止工作
角: ngClass条件停止工作
提问于 2019-02-20 20:02:28
目标：我希望在遍历对象时(在角度6中使用ngClass )，根据条件将文本更改为红色。
这是为我工作的，但突然之间就不再起作用了。
我试过打印来安慰..。我正在进步，假的，完全的，真实的
(Expected)这让我觉得第一个应该是红色，第二个应该是黑色。(实际的)但它们都是黑色的。
我还尝试将变量isComplete重新设置为false，如果它达到了其他条件。ngClass
HTML：
<div class="row" *ngFor="let lesson of lessons">
<div>
<div class="flex">
<div>
Status: <span [ngClass]="(isComplete!=true)?'text-red':''">{{ lesson.Status }}</span>
</div>
</div>
</div>
</div>TypeScript：
private isComplete: boolean = false;
this.lessons.forEach(element => {
if (element.Status == "Complete") {
this.isComplete = true;
element.Status = this.var1;
}
else {
element.Status = this.var2;
}
});回答 3
Stack Overflow用户
发布于 2019-02-20 21:42:14
我看到您将isComplete值赋值给一个全局变量。这是所有的教训分享，所以根据你目前的逻辑，他们都将是红色或全部黑色。
我将重构使isComplete作为一个属性存在于单独的课程中，这样您就可以为每个课程获得一个单独的值。
您可以在视图模型从服务器到达后更新它。只要您能够确定是否完成，就不应该有任何理由不能扩展VM。
processedLessons = []
this.lessons.forEach(lesson => {
if (lesson.Status == "Complete") {
lesson.isComplete = true;
lesson.Status = this.var1;
processedLessons.push(lesson);
}
else {
lesson.Status = this.var2;
}
});
在此之后，我将将我的模板重构为：
<div class="row" *ngFor="let lesson of processedLessons">
<div>
<div class="flex">
<div>
Status: <span [ngClass]="{'red': !lesson.isComplete, 'black': lesson.isComplete }">{{ lesson.Status }}</span>
</div>
</div>
</div>
</div>
或者用你原来的JavaScript.来做这个
<div class="row" *ngFor="let lesson of lessons">
<div>
<div class="flex">
<div>
Status: <span [ngClass]="{'red': lesson.status !== 'Complete', 'black': lesson.status === 'Complete' }">{{ lesson.Status }}</span>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2019-02-20 20:28:27
如果您检查文档：https://angular.io/api/common/NgClass
无论如何，我没有看到像你这样的用例，你应该这样做：
<span [ngClass]="{'text-red': !isComplete}">{{ lesson.Status }}</span>此外，检查文件u将更有用的用途。
Stack Overflow用户
发布于 2019-02-21 18:48:12
<span [ngClass]="{'text-red': lesson.Status == 'Complete'}">{{ lesson.Status }}</span>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54794382
复制相关文章
相似问题
腾讯云开发者
