如何解决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,AngularsvgIconModule.forRoot(),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>
      <h4>Details</h4>
      <button type="button"aria-label="Close" (click)="activeModal.dismiss(''Cross click'')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <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。我在应用程序级别和模块级别都有它。尝试从另一个删除也不起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

Can't bind to 'ngFor' since it isn't a kNown property of 'div'. ("

<div [ERROR ->]*ngFor="t of test">{{t}}</div>")

<div *ngFor="t of test">asdas</div>

<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title>Angular 2</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />

<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js">    </script>
</head>
<body>

<radar>Loading...</radar>
<script>System.import('radar-view');</script>

</body>
</html>

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component,View,bootstrap} from 'angular2/angular2';
import {FormBuilder,Validators,formDirectives,ControlGroup} from 'angular2/angular2';

@Component({
selector: 'radar',appInjector: [FormBuilder]
})
@View({
template: '<div [control-group]="form"><input control="levels">    {{form.controls.levels.value}}</div>',directives: [formDirectives]
})
export class RadarView {
form: ControlGroup;
builder: FormBuilder;

constructor(builder: FormBuilder) {
    this.builder = builder;
    this.form = builder.group({
        levels: ["5"]
    });
}
}

bootstrap(RadarView);

tsc --watch --target es5 --module commonjs --emitDecoratorMetadata

this.form = builder.group({
    levels: ["5",Validators.required]
});

class Validators {
    static required: any;
}