Angular4 예외:'input'의 알려진 속성이 아니므로 'ngClass'에 바인딩할 수 없습니다.

Angular4 예외:'input'의 알려진 속성이 아니므로 'ngClass'에 바인딩할 수 없습니다.

제 등록 에서는 ▁i▁in다있▁usingm▁so▁i'. 그래서, 내 등록 모듈에서 나는 사용하고 있습니다.[ngClass]잘못된 클래스를 추가하도록 지시하는 경우formGroup양식에 몇 검사 . 내 코드는 등록양식몇유가검오있을 하려고 할 때를 던집니다. 그러나 내 코드는 추가할 때 예외를 던집니다.[ngClass]내 양식에 대한 지시.

'input'의 알려진 속성이 아니므로 'ngClass'에 바인딩할 수 없습니다.

오류 자체를 조사하는 동안 'direction: [NgStyle]'을 구성 요소에 추가하는 등 몇 가지 해결책을 찾았지만, 이 방법으로는 문제가 해결되지 않습니다.

내 코드는 다음과 같습니다.

register.ts.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RegisterComponent } from "app/modules/register/register.component";


const routes: Routes = [
{
    path: '', pathMatch: 'full',
    component: RegisterComponent
}
];

@NgModule({
    imports: [
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule
],
declarations: [RegisterComponent],
    exports: [RouterModule]
})
export class RegisterRouter { }

register.ts.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterRouter } from './register.router';  


@NgModule({
    imports: [
      CommonModule,
      RegisterRouter
],
    declarations: []
})
export class RegisterModule { }

register.component.ts

import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

    @Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

//#region Declarations
    UserForm: FormGroup;
    inValid: boolean = false;
//#endregion

constructor(
    private _fb: FormBuilder) { 
    this.UserForm =  _fb.group({
    "_firstname" : ['', Validators.required]
    });
}
}

register.component.cisco

<input type="text" class="form-control" [ngClass]="{'ahinValid': inValid}" id="txtFirst_Name" aria-describedby="ariaFirstName" placeholder="Enter First Name"
          name="_firstname" [formControl]="UserForm.controls['_firstname']">

도와주셔서 고맙습니다.

때부터RegisterComponent는 선었습니다되로 선언되었습니다.RegisterRouter무엇입니까.CommonModule예:예:

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule,
    CommonModule      <================== this line
  ],
  declarations: [
    RegisterComponent // this component wants to have access to built-in directives
  ],
  exports: [RouterModule]
})
export class RegisterRouter { }

분들을 .CommonModule

나는 단지 컴파일할 수 없는 라이브러리를 가지고 있었습니다.저는 몇 개의 모듈을 가지고 있었습니다.다른 더 작은/구성요소를 가져오는 경우:

작은 모듈 중 하나에 있는 구성 요소 중 하나에 [ngClass]가 들어 있었습니다.lib가 컴파일하고 던지지 않게 할 것입니다.Can't bind to 'ngClass' since it isn't a known property of 'div'

보아하니...저는 그 모듈들을 위해 제 모든 부품들을 내보내고 있었습니다.하지만 모듈 자체는 아닙니다.public-api.tsfile(CommonModule 파일):

export * from './lib/af-layout/af-layout.module'; // <==== THAT WAS MISSING
export * from './lib/af-layout/components/af-layout-header/af-layout-header.component';

그걸 찾는 데 오랜 시간이 걸렸습니다.오류로 인해 CommonModule이 Import되지 않았습니다.내보내기가 누락된 것은 아닙니다.

공통 모듈이 상위 모듈(예: app.module)의 가져오기에 포함되는 것 외에도 문제를 제기하는 구성 요소가 실제로 상위 모듈의 선언에 포함되는지 확인합니다.

Lazy Loading Share 모듈 문제 공통 해결책:

은 모두 "" " " " 를 가져와야 .CommonModule

공유 모듈:

@NgModule({
  imports: [CommonModule],
  ...
})

구성 요소를 사용할 모듈:

@NgModule({
  imports: [CommonModule, ...],
  ...
})

모든 Name.module.ts 파일의 @ngModuls 선언으로 구성 요소를 가져옵니다.

공통 모듈을 가져와야 합니다.

@NgModule({
  imports: [CommonModule],
  ...
})

외부 모듈을 제거하고 가져오기 배열에서 제거하는 것을 잊어버려서 이 오류가 발생했습니다.

하나의 가져오기에 오류가 있으면 전체 모듈 클래스에 영향을 줍니다.

다른 방법이 없는 경우 모듈 파일에서 "빨간색 줄"을 확인합니다.

Common 모듈을 추가하는 것도 저에게는 효과가 없었습니다.모듈의 "선언문"에 내 구성요소를 추가하는 것은 완벽하게 작동했습니다.

참조 - https://www.javaer101.com/en/article/42275629.html

저도 같은 오류가 있었습니다.

새로 생성된 구성 요소를 한 폴더에서 다른 폴더로 이동한 후에 발생한 것으로 나타났습니다.그 이동으로 인해 app.module.ts 파일이 엉망이 되었습니다.

끊어진 경로를 수정하고 ngserver를 다시 시작하고 voila: 문제가 해결되었습니다.

몇 시간 동안 솔루션을 찾고 완벽한 npm 재설치 프로세스를 거쳤기 때문에 이 솔루션이 다른 사람에게 도움이 되길 바랍니다.

나는 app.module 파일의 오류에 대해 나에게 알려주지 않은 나의 IDE를 탓하지만, 이것은 결국 나 자신의 게으른 행동 때문입니다.

제 경우에는 Common Module 가져오기가 필요하지 않았습니다.[ngClass] 대신 [ngclass]를 입력했습니다.대소문자를 구분하고 "c"가 아닌 "C"라는 대문자가 필요했던 것 같습니다.

module.ts에서 잘못 가져온 것이 있거나 누락된 것이 있으면 이 오류도 발생할 수 있습니다.저 같은 경우에는 그런 일이 있어요.

CommonModule 가져오기를 선택하고 맞춤법이 올바른지 확인합니다.[ngClass]="{'your_class':condition}"

저는 Angular 14로 업그레이드한 후에 이 문제가 발생했습니다.

제 app.module.ts 파일의 거의 모든 행이 빨간색 선으로 밑줄이 그어져 있었습니다.그리고 네, 이미 파일에 이것을 가지고 있었습니다.

  imports: [
    CommonModule,

이상하게도 파일에서 많은 줄을 삭제한 다음 Ctrl+Z를 누르면 대부분의 빨간색 줄이 사라지고 코드 줄에 빨간색 줄이 남게 됩니다.

import { NgxDropzoneModule } from 'ngx-dropzone';

제 파일에서 이것을 제거했고, 모든 것이 정상적으로 구축되었습니다.

다른 사람들이 말했듯이, 이 app.module.ts 파일의 작은 오류 하나가 다른 곳에서 수백 개의 빌드 오류를 제공할 것으로 보입니다.요령은 하나의 결함이 있는 선을 찾는 것입니다.

그런데, 제 코드가 이 변경 사항으로 정상적으로 빌드된 것을 확인한 후, 저는 앱에 "장애" 라이브러리를 다시 추가하려고 시도했고, 이후에는 모두 정상적으로 작동했습니다.

npm install --save ngx-dropzone

라이브러리 프로젝트에서 이 오류가 발생한 사용자를 위한 것입니다.

저의 경우, 이것은 의존성의 부족으로 인해 발생했습니다.

종속성으로 추가하는 것 Dependencyyarn add --dev ng-packagr) 문제를 해결했습니다.

대신에[ngClass]사용할 수 있습니다.

[class.my_class] = "step === 'step1'"

언급URL : https://stackoverflow.com/questions/48288305/angular4-exception-cant-bind-to-ngclass-since-it-isnt-a-known-property-of