*ngIf 和 ngmodel 不适用于 .html 页面

Question

我在 Angular 中使用以下版本，Angular CLI：17.3.4，节点：20.9.0，包管理器：npm 10.5.2。当我在组件中的 .html 页面上使用 *ngIf 或 ngmodel 时，我收到以下错误消息，表明它不支持它们。

NG8103：模板中使用了

*ngIf

指令，但

NgIf

指令和

CommonModule

均未导入。使用 Angular 的内置控制流 @if 或确保

NgIf

指令或

CommonModule

包含在此组件的

@Component.imports

数组中。 我能知道是因为 Angular 版本吗？因此我无法发送数据或从后端获取数据。

我尝试了以下代码，

<input type="email" id="email" formControlName="email" placeholder="Enter your email" class="form-control" required>

因为我遇到错误，所以我使用了以下代码

<div *ngIf="email.errors?.['required']">Email is required.</div>

但这并没有成功连接后端。

Answer 1

此错误告诉您，当您尝试在模板中使用 *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 是传统模块。