Angular：ng类条件停止工作

Question

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

这对我有用，但突然间不再有效了。

我已经尝试打印到控制台...我正在进行中进行错误完成正确

（预期）这让我觉得第一个应该是红色，第二个应该是黑色。 （实际）但他们都是黑人。

我还尝试将变量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;
    }
});

Answer 1

我看到你将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>

Answer 2

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

我还没有看到像你这样的用例，你应该怎么做：

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

另外，检查文件你会更有用。

Answer 3

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