ngClass 在我的 Angular 项目中不起作用

Question

我正在尝试制作一个带有验证的表单，我正在使用以下界面来定义 FieldError。

export interface FieldError {
  errorAt: string;
  errorMessage: string;
}

在我的 component.html 中，我正在使用 [ngClass] 来检查 FieldError.errorAt === 'first_name' 我是否想使用 text-danger，如果不是，我想使用 text-muted .

好像跟

<div class="form-group text-left">
    <label [ngClass]="{'text-danger':FieldError.errorAt==='first_name','text-muted':FieldError.errorAt!=='first_name'}">First name*</label>
    <input type="text" class="form-control" [(ngModel)]='first_name'>
    <small class="text-danger"> First-Name is Required </small>
</div>

我知道我可以使用它，?: 的三级运算符，但即使那样也不起作用。

我的 ngOnInit 也有以下代码：

ngOnInit(): void {
    this.FieldError.errorAt = '';
    this.FieldError.errorMessage = '';
}

***注：***那些是bootstrap类.

Answer 1

使用接口时，它定义了变量的类型。

public formField: FieldError = {errorAt: '', errorMessage: ''};

然后就可以在ngClass中使用了

<div class="form-group text-left">
    <label [ngClass]="{'text-danger': formField.errorAt==='first_name','text-muted': formField.errorAt!=='first_name'}">First name*</label>
    <input type="text" class="form-control" [(ngModel)]='first_name'>
    <small class="text-danger"> First-Name is Required </small>
</div>

最好的办法是在模板上使用命名变量，然后使用模板变量检查验证。

https://angular.io/guide/form-validation#validating-input-in-template-driven-forms

<div class="form-group text-left">
    <label [ngClass]="{'text-danger': fname.invalid,'text-muted': fname.invalid}">First name*</label>
    <input type="text" class="form-control" [(ngModel)]='first_name' #fname="ngModel">
    <small class="text-danger"> First-Name is Required </small>
</div>

Answer 2

好的，所以除了最后一个小时，我还多加了一点时间。

所以 FieldError 是一个接口，这就是它没有初始化自身的原因，即它甚至不应该有值。

我需要像下面这样简单地使用组件级对象，而不是接口。

  FieldError = {
    errorAt: '',
    errorMessage: ''
  };

Answer 3

尝试使用如下所示的三元运算符

<i class="fa fa-lg fa-fw" [ngClass]="{
'fa-check-square text-primary': collection.includes(vendor.id),
'fa-window-close text-danger': !collection.includes(vendor.id)
}"></i>

Answer 4

表格 docs:

The CSS classes are updated as follows, depending on the type of the expression evaluation:

string - CSS 类中列出的字符串（space 分隔）是已添加，
Array - 添加声明为 Array 元素的 CSS 类，
对象 - 键是 CSS 类，在表达式时添加在值中给出的值为真值，否则它们是已删除。

当我们使用一些像

[ngClass]="{'text-danger': fname.invalid,'text-muted': !fname.invalid}"

你正在使用 ngClass 作为“对象”（表达式结果（*）是一个对象），看到方式是 {'name class':condition,...}

如果你使用一些像

[ngClass]="fname.invalid?'text-danger':'text-muted'"

您将 ngClass 用作“字符串”（表达式结果 (*) 是一个字符串）-看到没有 { }-

(*) 双引号括起来的表达式

ngClass 在我的 Angular 项目中不起作用

ngClass not working in my Angular Project

html

angularjs

typescript

ng-class

angular