我正在使用Angular版本17收件箱

<div class="row" [class.dark-category-box]="themeService.isDark()" *ngIf="trendingCategories">

我得到了这个错误:

 Can't bind to 'ngIf' since it isn't a known property of 'div' (used in the 
'CategoriesStyleThreeComponent' component template).
If the 'ngIf' is an Angular control flow directive, please make sure that either the 
'NgIf' directive or the 'CommonModule' is included in the '@Component.imports' of this component.

这是app.模块:

    import { HttpClientModule } from '@angular/common/http'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgxScrollTopModule } from 'ngx-scrolltop';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { CommonModule } from '@angular/common';  
import {CategoriesStyleThreeComponent} from './components/common/categories-style-three/categories-style-three.component'

 @NgModule({
 declarations: [],
 imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NgxScrollTopModule,
    HttpClientModule,
    CommonModule
 ],
 providers: [],
 bootstrap: [],
     exports: [CategoriesStyleThreeComponent]
 })
   export class AppModule { }

以及我的组件代码:

 import { Component, OnInit } from '@angular/core';
 import { ThemeCustomizerService } from '../theme-customizer/theme-customizer.service';
 import { RouterLink } from '@angular/router';
 import { CategoryService } from '../../../services/category.service';
 import { Category } from '../../../models/category.model';


@Component({
selector: 'app-categories-style-three',
standalone: true,
imports: [RouterLink],
templateUrl: './categories-style-three.component.html',
styleUrls: ['./categories-style-three.component.scss']
})
export class CategoriesStyleThreeComponent implements OnInit {
trendingCategories: Category[];
numCategories: number = 5;

isToggled = false;

constructor(public themeService: ThemeCustomizerService,
    private categoryService: CategoryService) {
    this.themeService.isToggled$.subscribe(isToggled => {
        this.isToggled = isToggled;
    });
}

toggleTheme() {
    this.themeService.toggleTheme();
}

ngOnInit(): void { 
    this.loadTrendingCategories();
}

loadTrendingCategories(): void {
    this.categoryService.getTrendingCategories()
        .subscribe(categories => {
            this.trendingCategories = categories;
            console.log(categories);
        });
  }

 }
 

推荐答案

如果CategoriesStyleThreeComponent是独立的,则确保您已将CommonModule添加到导入数组!

CommonModule包含在HTML中使用的ngClassngIf等指令,您还可以单独导入这些单独的项目.

独立组件需要将导入添加到组件上,因为它们可以作为一个单独的单元运行,而不依赖于模块!

...
@Component({
  ...
  standalone: true,
  imports: [
    ...
    CommonModule,
    ...
  ],
  ...
})
export class CategoriesStyleThreeComponent {
    ...

Angular相关问答推荐

如何在@angular/material-experimental中使用自定义调色板-Expeded $connect.Color.primary将成为有效的M3调色板

HttpInterceptorFn在Angular 17中被忽略

如何通过innerHtml在模板中显示动态插入的动感图标?

MAT-复选框更改事件未在onSubscriberCheck函数中返回选中的值

P-DropDown不会使用react 式表单手动设置Value

在以下位置升级到Angular 16 Break Sharepoint广告:This._history.replaceState不是函数

Angular 迁移 14 到 15 / 16:angular universal 是否停止将 <!-- this page was prerendered with angular universal --> 用于预渲染页面?

Angular 测试被认为是成功的,即使有错误

Angular 获取视频持续时间并存储在外部变量中

当我ng serve时,Angular CLI 提示TypeError: callbacks[i] is not a function

我应该在 Jasmine 3 中使用什么来代替 fit 和 fdescribe?

为什么 Angular2 (click) 事件没有在

如何使用 Bootstrap 4 flexbox 填充可用内容?

设置 Angular Material Tooltip 的字体大小

样式 html,来自 Web 组件的正文

Angular 4中的md-select中的onselected事件

Angular2中是否有像window.onbeforeunload这样的生命周期钩子?

测试一个包含 setTimeout() 的函数

如何作为模块的子模块路由到模块 - Angular 2 RC 5

如何使用 @ngrx/store 获取 State 对象的当前值?