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

问题描述 投票:0回答:1

我在 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>
但这并没有成功连接后端。

angular-ngmodel angular-ng-if angular17
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.