我在 Angular 中使用以下版本,Angular CLI:17.3.4,节点:20.9.0,包管理器:npm 10.5.2。当我在组件中的 .html 页面上使用 *ngIf 或 ngmodel 时,我收到以下错误消息,表明它不支持它们。
NG8103:模板中使用了
指令,但*ngIf
指令和NgIf
均未导入。使用 Angular 的内置控制流 @if 或确保CommonModule
指令或NgIf
包含在此组件的CommonModule
数组中。 我能知道是因为 Angular 版本吗?因此我无法发送数据或从后端获取数据。@Component.imports
我尝试了以下代码,
<input type="email" id="email" formControlName="email" placeholder="Enter your email" class="form-control" required>
因为我遇到错误,所以我使用了以下代码<div *ngIf="email.errors?.['required']">Email is required.</div>
但这并没有成功连接后端。
此错误告诉您,当您尝试在模板中使用 *ngIf 指令时,NgIf 指令或 CommonModule 尚未正确导入到使用它的组件中。 Angular 转向可选的 NgModules 意味着每个独立组件都需要显式声明其依赖项。
要解决此问题,您需要确保 CommonModule(包括 NgIf、ngFor 等)已导入到您的组件中,或者您的组件已声明为具有必要的导入。以下是调整组件设置的方法。 也许是这样的:
import { Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'your-selector',
templateUrl: './your-component.html',
styleUrls: ['./your-component.scss'],
imports: [CommonModule, FormsModule, ReactiveFormsModule] // Import CommonModule here
})
export class YourComponent {
// Your component logic here
}
或
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { YourComponent } from './path/to/your.component';
@NgModule({
declarations: [YourComponent],
imports: [
CommonModule,
FormsModule, // For template-driven forms
ReactiveFormsModule // For reactive forms
],
exports: [YourComponent]
})
export class YourModule {}
如果 NgModule 是传统模块。