ngClass在我的Angular项目中不起作用 [英] ngClass not working in my Angular Project

问题描述

我正在尝试通过验证制作表单，并且正在使用以下界面定义 FieldError .

I'm trying to make a form with validation, and I am using the following interface to define FieldError.

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

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

In my component.html I am using [ngClass] to check if the FieldError.errorAt === 'first_name' I want to use text-danger and if not I want to use 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>

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

I understand I can use that, the tertiary operator for ?:, but even that is not working.

我的 ngOnInit 也具有以下代码:

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

***注意:***这些是引导程序类.

***Note: *** Those are bootstrap classes.

推荐答案

好吧，除了最后一个小时，我还花了更多时间.

Ok, So I put a little more time on it, in addition to the last one hour.

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

So the FieldError is an interface and this is the reason that it is not initializing itself, i.e. It should not even have the value.

我只需要简单地使用如下组件级别的对象，而不是接口即可.

I need to simply use a Component level object like following, rather than the interface.

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

这篇关于ngClass在我的Angular项目中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！