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>

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;
    }
});

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

无论如何我都没有看到像您这样的用例，这是您应该如何做：

for hit in soup.find_all("div", class_="name"):
    msg1 = hit.get_text()

另外，检查文档u将会更有用。

Answer 3

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

Angular：ngClass条件停止工作

3 个答案: