Angular：ngClass条件停止工作答案

【问题标题】：Angular: ngClass conditional stopped workingAngular：ngClass条件停止工作
【发布时间】：2019-02-20 20:02:28
【问题描述】：

目标：我想在循环对象时根据条件将文本更改为红色（在 Angular 6 中使用 ngClass）

这对我有用，但突然不再工作了。

我已经尝试打印到控制台...我得到了进行中错误的完全的真的

(Expected) 这让我觉得第一个应该是红色的，第二个应该是黑色的。（实际）但它们都是黑色的。

我还尝试将变量 isComplete 重置为 false，如果它达到 else 条件。 Angular: conditional class with *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>

打字稿：

private isComplete: boolean = false;

this.lessons.forEach(element => {                           
    if (element.Status == "Complete") {
        this.isComplete = true;
        element.Status = this.var1;
    }
    else {
        element.Status = this.var2;
    }
});

【问题讨论】：

this.lessons 的输出是什么？
第一次：进行中第二次：完成
ngClass 仅根据this.isComplete 的最后一个值进行渲染，在本例中为true。您应该将 isComplete 附加到元素 element.isComplete=...

标签： angular typescript boolean conditional

【解决方案1】：

我看到您将 isComplete 值分配给全局变量。这是所有课程共享的，因此按照您当前的逻辑，它们将全部为红色或全部为黑色。

我会重构让 isComplete 作为一个属性存在于单个课程中，这样您就可以为每个课程设置一个单独的值。

您可以在视图模型从服务器到达后更新它。只要您可以确定是否完整，就不应该有任何理由不能扩展虚拟机。

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>

【讨论】：

是的，你是对的，我最终注意到了这一点。我不想将它添加到课程界面，因为它来自数据库。如果有任何其他方法可以解决这个问题，我会集思广益。我发现的一个不是最干净的方法是更改 ngClass 以确保两件事不正确，而不是一件。我测试过，它可以工作，但我更喜欢更清洁的方式。
我进行了重构，以提供一种可能更清洁的解决方案，而无需更新您的数据库模型。
创建一个新对象 (processedLessons) 并将原始数据放入该对象是比在循环中进行两次条件检查更好的解决方案 (lesson.Status!='Complete' && item.Status! ='其他'？
并非如此。但我认为你可以进一步简化它，通过删除循环并像最后一个代码 sn-p 那样绑定到 ngclass。 [ngClass]="{'red': course.status !== 'Complete', 'black': course.status === 'Complete' }"

【解决方案2】：

如果你检查文档：https://angular.io/api/common/NgClass

反正我没有看到像你这样的用例，你应该这样做：

<span [ngClass]="{'text-red': !isComplete}">{{ lesson.Status }}</span>

另外，检查一下你会更有用的文档。

【讨论】：

没有人：查看链接stackoverflow.com/questions/35269179/…
我不明白你，那里的答案和我的一模一样，不是我抄的，你想让我看到什么？
我只是想说，除了第一个文档中显示的方法之外，还有更多方法。不重要

【解决方案3】：

<span [ngClass]="{'text-red': lesson.Status == 'Complete'}">{{ lesson.Status }}</span>

【讨论】：