Angular: перестал работать ngClass условно - PullRequest
Новая
       12

Angular: перестал работать ngClass условно

0 голосов
/ 20 февраля 2019

Цель : Я хочу изменить текст на красный в зависимости от условия при циклическом прохождении объекта (используя ngClass в Angular 6)

Это сработало для меня, но всевнезапно больше не работает.

Я пытался печатать на консоли ... и я получаю In Progress false Завершить true

( Ожидается ) Что делаетя думаю, что первый должен быть красным, а второй черным.( Actual ) Но они оба черные.

Я также попытался сбросить переменную isComplete обратно в false, если она достигла условия else. Угловой: условный класс с * 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;
    }
});

Ответы [ 3 ]

0 голосов
/ 21 февраля 2019

Я вижу, что вы присваиваете значение 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>
0 голосов
/ 21 февраля 2019 
<span [ngClass]="{'text-red': lesson.Status == 'Complete'}">{{ lesson.Status }}</span>
0 голосов
/ 20 февраля 2019

если вы проверяете документ: https://angular.io/api/common/NgClass

В любом случае я не вижу ни одного варианта использования, подобного вашему, вот как вы должны это сделать: 

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

также проверьтеДокумент, который вы будете более полезным использовать.

...