Angular 2：在 ngFor 中动态添加一个类答案

【问题标题】：Angular 2: Add a class dynamically in ngForAngular 2：在 ngFor 中动态添加一个类
【发布时间】：2016-10-20 09:17:22
【问题描述】：

我正在尝试在 *ngFor 中动态添加一个类。当我在文本框中输入无效文本时，它会将文本框边框更改为红色。

HTML

<div *ngFor="let appt of appointments">
    <div class="ctrl-wpr" *ngIf="appt.personVitals && appt.personVitals.weight">
        <md-input class="ctrl-wpr__ctrl" [(ngModel)]="appt.personVitals.weight.weight" [ngClass]="{'error_bgcolor': errcolor }" (keyup)="validate(appt.personVitals.weight.weight)"
            (blur)="updatePersonvitals(appt.personVitals.weight, 'kgs', appt.patientInfo.id)">
        </md-input>
    </div>
</div>

脚本

validate(wt: any) {
        if (/^\d+(\.\d{1,3})?$/.test(wt)) {
            this.errcolor = false;
        }
        else {
            this.errcolor = true;
        }
    }

CSS

.error_bgcolor {
        .md-input-underline .md-input-ripple  {  
            background-color: red;
            opacity: 1;
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }        
    }

我遇到的问题是当输入无效文本时，红色适用于所有文本框，而不仅仅是无效的文本框。如何让它更有活力？

【问题讨论】：

标签： angular

【解决方案1】：

问题是您在所有ngClass 指令中使用了一个相同的值（变量errcolor 的值），因此如果其中一个输入无效，则它们都被标记为无效。你可以这样做：

<div *ngFor="let appt of appointments">
    <div class="ctrl-wpr" *ngIf="appt.personVitals && appt.personVitals.weight">
        <md-input class="ctrl-wpr__ctrl" [(ngModel)]="appt.personVitals.weight.weight" [ngClass]="{'error_bgcolor': validate(appt.personVitals.weight.weight)}" (keyup)="validate(appt.personVitals.weight.weight)"
        (blur)="updatePersonvitals(appt.personVitals.weight, 'kgs', appt.patientInfo.id)">
        </md-input>
    </div>
</div>

还有你的验证方法：

validate(wt: any) {
    if (/^\d+(\.\d{1,3})?$/.test(wt)) {
        return false;
    }
    else {
        return true;
    }
}

【讨论】：