'ngForOf'는 'tr'의 알려진 속성이 아니므로 바인딩할 수 없습니다(최종 릴리스).
Angular2 Angular2를 2.1.0회사 목록을 표시하려고 할 때 이 오류가 발생했습니다.
file.component.ts:
public companies: any[] = [
{ "id": 0, "name": "Available" },
{ "id": 1, "name": "Ready" },
{ "id": 2, "name": "Started" }
];
file.component.html:
<tbody>
<tr *ngFor="let item of companies; let i =index">
<td>{{i}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
더하다BrowserModuleimports: []@NgModule() 모듈 module)인 경우AppModule 않은 경우, ), 그지않으면렇면▁),않으CommonModule.
// older Angular versions
// import {BrowserModule, CommonModule} from '@angular/common';
import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
imports: [BrowserModule, /* or CommonModule */],
..
})
제 경우, 문제는 제 팀원이 언급한 것입니다.*ngfor 대신 *ngFor이 문제를 처리할 올바른 오류가 없다는 것이 이상합니다(In Angular 4).
은 가와야합을 수입해야 .CommonModule이러한 된 지시어를 에서는 다과 지침사모용서듈과 같이 합니다.ngFor,ngIf 타기.
import { CommonModule } from '@angular/common'
@NgModule({
imports: [
CommonModule
]
})
export class ProductModule { }
가능한 이유는 다음과 같습니다.
- 당신의.
module을 가지고 있지 않음CommonModuleimports[] - 당신의.
component사용중위치인을 하는 곳*ngFor또는*ngIf는 의일아닙다의 .module. - 오타가 있을 수 있습니다.
*ngFor예**ngFor또는*ngfor - 문제가 없으면 앱을 다시 시작합니다.
ng serve또는IDE例:VS 코드,IntelliJ 등.
모듈인 커스텀 메이드 모듈을 입니다.HouseModule내 안에서app.module.ts저는 다른 수입품들을 가지고 있었습니다.
파일: app.module.ts
import { HouseModule } from './Modules/house/house.module';
@NgModule({
imports: [
HouseModule
]
})
기능 모듈에 경로 구성 요소를 선언하지 않은 경우에도 이 문제가 발생할 수 있습니다.예를 들어 다음과 같습니다.
feature.vmdk.ts:
...
{
path: '',
component: ViewComponent,
}
...
feature.ts:
imports: [ FeatureRoutingModule ],
declarations: [],
View 구성 요소는 선언 배열에 없지만 선언 배열에는 있어야 합니다.
모듈의 선언: [] 섹션에 사용 중인 구성 요소가 등록되지 않아 오류가 발생했습니다.
구성 요소를 추가한 후 오류가 사라졌습니다.저는 이 오류 메시지보다 덜 모호한 것이 실제 문제를 나타내길 바랬을 것입니다.
기억해야 할 사항:
사용자 지정 모듈(AppModule 이외의 모듈)을 사용하는 경우에는 해당 모듈에서 공통 모듈을 가져와야 합니다.
yourmodule.module.ts
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
exports:[ ],
declarations: []
})
동일한 오류가 발생했습니다. 다음 방법 중 하나를 사용하여 해결할 수 있습니다.
중첩된 모듈이 없는 경우
앱 모듈에서 공통 모듈 가져오기
앱 모듈에서 *ngFor를 추가할 구성 요소 가져오기, 선언에서 정의
// file App.modules.ts
@NgModule({
declarations: [
LoginComponent // declarations of your component
],
imports: [
BrowserModule
DemoMaterialModule,
FormsModule,
HttpClientModule,
ReactiveFormsModule,
AppRoutingModule,
BrowserAnimationsModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
],
providers: [
ApiService,
CookieService,
{
provide: HTTP_INTERCEPTORS,
useClass: ApiInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
라우팅에 별도의 모듈 파일을 사용하는 경우 라우팅 모듈에서 공통 모듈 가져오기 또는 앱 모듈에서 공통 모듈 가져오기
// file app.routing.modules.ts
import { LoginComponent } from './login/login.component';
import { CommonModule } from "@angular/common";
const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'login', component: LoginComponent }
];
@NgModule({
imports: [RouterModule,RouterModule.forRoot(routes), CommonModule],
exports: [RouterModule]
})
- 중첩된 모듈이 있는 경우 해당 모듈의 첫 번째 단계를 수행합니다.
저의 경우, 두 번째 방법으로 문제를 해결했습니다.
이것이 당신에게 도움이 되기를 바랍니다.
미래의 독자들
다음을 각각 확인합니다.
- 구성 요소가 단일 각도 모듈에서 선언됩니다.
- 확인하십시오.
import { CommonModule } from '@angular/common'; - IDE/편집기를 다시 시작합니다.
- 서버를다시 합니다(dev 시니 다합작다서시버를(다▁restart).
ng serve)
자체 모듈을 만드는 경우 자체 모듈의 가져오기에 CommonModule을 추가합니다.
만약 가 수입을 해서입니다.CommonModule서버 재시작을 시도합니다.가 있습니다.
구성 요소를 app.module에 추가합니다.
import { ModalComponent } from './modal/modal.component';
@NgModule({
declarations: [ModalComponent],
entryComponents: [ModalComponent],
}),
providers: [
],
bootstrap: [AppComponent]
})
제 경우에는 구성 요소가 app.module.ts에 나열되지 않았습니다.
각도 10의 경우
- 경로 모듈 가져오기에 브라우저 모듈을 추가합니다.
- 작동하지 않는 구성 요소를 앱 모듈 선언에 추가했는지 확인합니다.
2단계를 수행하지 않으면 이 오류가 트리거됩니다!
serve를 재시작해야 합니다!!!
그러니 확인 부탁드립니다.
지시문에 구문 오류가 없습니다.
브라우저(App Module) 및 공통(다른/하위) 모듈을 가져옵니다(위에서 언급한 귄터 조흐바우어와 동일).
애플리케이션에 경로가 있는 경우 앱 모듈에서 경로 모듈을 가져와야 합니다.
라우팅된 모든 구성 요소의 모듈은 App-routing.module.ts와 같이 App Module에서도 가져옵니다.
구성 경로:경로 = [
{path: ', 구성 요소:고객 구성 요소,
{path: 'admin', 구성 요소:관리 구성 요소}
];
그런 다음 App 모듈은 CustomerComponent 및 AdminComponent의 모듈을 @NgModule()에 가져와야 합니다.
많은 답변들이 수입을 통해 수렴되는 것 같습니다.CommonModule다른(새/사용자 지정) 모듈에서.
이 단계만으로는 모든 상황에서 충분하지 않습니다.
전체 솔루션은 다음 두 단계로 구성됩니다.
- 만들기
NgIf,NgFor프로젝트에서 볼 수 있는 등. - 모分)으로 재조립합니다.
app.module.ts)
1은 1입니다.
BrowserModule은 메인모에충보분입다니해에기액하세에 할 것 .NgForAngular Documentation은 다음과 같습니다.
Common Module NgIf, NgForOf, DecimalPipe 등과 같은 모든 기본 Angular 디렉티브 및 파이프를 내보냅니다.브라우저 모듈에서 다시 내보냅니다.
참고 항목승인된 답변: 각도가 있는 공통 모듈 대
2는 2입니다.
한 변경
- Module 모오 기가져듈
OtherModule - 가져오기
OtherComponent - ng 빌드(중요!)
- 서브
app.s.ts.
@NgModule({
imports: [
BrowserModule,
OtherModule
],
declarations: [OtherComponent, AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
기타의
<div *ngFor='let o of others;'>
</div>
other.component.ts
@Component({
selector: 'other-component',
templateUrl: './other.html'
})
export class OtherComponent {
}
app.s.ts.
@NgModule({
imports: [],
providers: []
})
export class OtherModule{
}
모든 코드에서 올바른 구문을 사용한 후 각 모듈의 선언에서 구성 요소를 언급했는지 확인하십시오.다음과 같은 것이 있습니다.
@NgModule({선언문: [AppComponent, YourComponent]),
"Module.ts"에서 "BrowserModule"과 "CommonModule"을 가져왔지만 작동하지 않았습니다. 제 오류는 "NgModule.declarations"에 구성 요소를 추가하지 않은 것입니다.
@NgModule ({
declarations: [
Your_Component // here
]
})
저도 같은 오류가 있었지만 Common Module을 가져왔습니다.대신 모듈을 분할할 때 복사/붙여넣기 때문에 쉼표를 남겨두었습니다.
@NgModule({
declarations: [
ShopComponent,
ShoppingEditComponent
],
imports: [
CommonModule,
FormsModule,
RouterModule.forChild([
{ path: 'shop', component: ShopComponent }, <--- offensive comma
])
]
})
app.module.ts가 다음으로 수정 및 변경됨: 앱 모듈에서 브라우저 모듈 가져오기
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
유사한 오류가 발생했습니다(*ngIf) 제가 가져온 모든 것이 정상이고 구성 요소가 다른 오류 없이 렌더링되었음에도 불구하고 + 라우팅은 정상이었습니다.
내 경우에는AppModule에는 해당 모듈이 포함되어 있지 않습니다.이상한 것은 이것에 대해 불평하지 않았다는 것이지만, 이것은 아이비가 어떻게 일하는지와 관련이 있을 수 있습니다.ng serve(루팅에 따라 모듈을 로드하는 유형이지만, 그 종속성은 고려되지 않습니다.)
사용자 지정 모듈에는 공통 모듈이 필요합니다.
import { CommonModule } from "@angular/common";
@NgModule({
imports: [
CommonModule
]
})
이미 가져온 경우(BrowserModule, CommonModule, FormsModule) 여전히 작동하지 않는 경우
그러면 오류가 있는 구성 요소가 모듈에 선언되었는지 확인하기만 하면 됩니다.
모듈을 구현한 경우 구성 요소를 가져와 선언에 구성 요소를 설정해야 합니다.
코딩에 행운을 빕니다 :)
"app-routing.module"을 사용하면 "CommonModule"을 가져오는 것을 잊습니다.가져오는 것을 기억하세요!
import { CommonModule } from "@angular/common";
@NgModule({ imports: [ CommonModule]})
Angular8 base 라이브 프로젝트를 시작했는데 위의 문제가 발생했지만 "app-routing.module"을 사용하면 "CommonModule"을 가져오는 것을 잊어버립니다.가져오는 것을 기억하세요!
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
]})
그것은 당신의 실수를 해결해 줄 것입니다.
대신 ** 때문에 문제가 생겼습니다.
*ngFor="let ingredient of ingredients"
**ngFor="let ingredient of ingredients"
나중에 참고하기 위해 Angular 12에서 유닛 테스트를 하고 있는데 우연히 이것을 발견했습니다.
나의 문제는 ng 부트스트랩 라이브러리를 사용하고 새로운 모달을 만드는 방법을 테스트하고 있다는 것이었습니다.NgbModal.
팝업에서 생성되는 구성 요소를 가져오는 것을 잊었기 때문에 이러한 경고를 받았습니다.
가져올 필요가 없었습니다.FormsModule,CommonModule또는BrowserModule.
따라서 이러한 오류가 발생할 경우 인스턴스를 생성하려는 구성 요소가 가져오기에 나열되어 있는지 확인하십시오.
몇 가지 구성 요소를 수정한 후 동일한 문제가 발생했습니다.구문 오류가 없고 모든 모듈을 가져왔으나 서버를 다시 시작하여 문제가 해결되었습니다.오류가 수십 번의 성공적인 커밋을 추가한 구성 요소에서 발생했습니다.
다른 사람이 같은 문제를 겪을 경우를 대비해서입니다.
언급URL : https://stackoverflow.com/questions/40331549/cant-bind-to-ngforof-since-it-isnt-a-known-property-of-tr-final-release
'sourcecode' 카테고리의 다른 글
| Postgres에 대한 pgcrypto의 pgkey_encrypt에 해당하는 MariaDB가 있습니까? (0) | 2023.06.23 |
|---|---|
| GitHub: 권한이 거부되었습니다(공개 키).치명적: 원격 끝이 예기치 않게 끊어졌습니다. (0) | 2023.06.23 |
| Python에서 환경 변수 읽기 및 쓰기? (0) | 2023.06.23 |
| Oracle에서 JPA로 날짜와 시간을 저장하는 방법은 무엇입니까? (0) | 2023.06.23 |
| java.sql.SQL 예외:jdbc:microsoft:sqlserver에 적합한 드라이버를 찾을 수 없습니다. (0) | 2023.06.23 |