我正在使用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);
});
}
}