angular - Angular 11 - 无法绑定到“ngForOf”，因为它不是“li”的已知属性

问题描述

我有一个 Angular 11 应用程序，其模块admin-layout在默认应用程序模块内命名。

这是我的app.module.ts：

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { ToastrModule } from "ngx-toastr";

import { SidebarModule } from './sidebar/sidebar.module';
import { FooterModule } from './shared/footer/footer.module';
import { NavbarModule} from './shared/navbar/navbar.module';

import { AppComponent } from './app.component';
import { AppRoutes } from './app.routing';

import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';


@NgModule({
  declarations: [
    AppComponent,
    AdminLayoutComponent
  ],
  imports: [
    BrowserAnimationsModule,
    RouterModule.forRoot(AppRoutes,{
      useHash: true
    }),
    SidebarModule,
    NavbarModule,
    ToastrModule.forRoot(),
    FooterModule,
    BrowserModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在里面app/layouts/admin-layouts，我有admin-layout.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { AdminLayoutRoutes } from './admin-layout.routing';

import { DashboardComponent } from '../../pages/dashboard/dashboard.component'

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { HttpClientModule } from '@angular/common/http';
import { AngularSvgIconModule } from 'angular-svg-icon';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    NgbModule,
    HttpClientModule, 
    AngularSvgIconModule.forRoot(),
    HttpClientModule,
  ],
  declarations: [
    DashboardComponent,
  ]
})

export class AdminLayoutModule {}

现在在组件内部app/pages/dashboard/dashboard-components.ts，我有：

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from './../../../environments/environment';
import Chart from 'chart.js';

import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Details</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12">
          <div class="card text-center">
            <div class="card-body">
              <li *ngFor="let item of data; let i = index">
                {{i}} {{item}}
              </li>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
})
export class NgbdModalContent {
  @Input() data: [];

  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
    selector: 'dashboard-cmp',
    moduleId: module.id,
    templateUrl: 'dashboard.component.html'
})

export class DashboardComponent implements OnInit{

  public data = [];

  httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };

  constructor(private modalService: NgbModal, private http: HttpClient) {}

    ngOnInit(){
      const modalRef = this.modalService.open(NgbdModalContent, { size: 'xl' });
      this.http.get<any>(environment.api_url + 'stats').subscribe(data => {
        for(var i = 1; i <= Object.keys(data["pole"]).length; i++){
            data.push(data["data"][i]);
        }
        console.log(data);
        modalRef.componentInstance.data = data;
      })
    }
}

我收到以下错误 -Can't bind to 'ngForOf' since it isn't a known property of 'li'

让console.log(data)我(2) [3.81, 1.44]

我在这里做错了什么？与其他 stackoverflow 答案一样，他们需要我CommonsModule在模块中导入。我在应用程序级别和模块级别都有它。尝试从彼此移除也不起作用。

标签： angular

angular - Angular 11 - 无法绑定到“ngForOf”，因为它不是“li”的已知属性

问题描述

解决方案

推荐阅读