Angular11 - NG0303：无法绑定到“ngForOf”，因为它不是“tr”的已知属性

Question

模板 TR 未显示，并生成错误：NG0303：无法绑定到“ngForOf”，因为它不是“tr”的已知属性。我不明白为什么。我在 Angular 11 和 navigator Chrone

控制台 html 中出现错误：

    <div>
    <h1 class="module-title">Job logs</h1>
    <span class="sp-notice">the time zone is set on GMT</span>
    <div class="container">
        <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#JobFirst</th>
                <th scope="col">Last start</th>
                <th scope="col">Last Finish</th>
                <th scope="col">Time</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of jobs">
                <th>{{ item.JobName }}</th>
                <td>{{ item.LastStartOperation }}</td>
                <td>{{ item.LastFinishOperation }}</td>
                <td>{{ item.Time }}</td>
              </tr>
            </tbody>
          </table>
    </div>
</div>

这是文件 component.ts 的内容：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-joblog',
  templateUrl: './joblog.component.html',
  styleUrls: ['./joblog.component.css']
})
export class JoblogComponent implements OnInit {

  jobs = [
    {
      JobName:'Client_Timer',
      LastFinishOperation:'2021-12-01',
      LastStartOperation:'2021-12-01',
      Time:'0 years 0 mons 0 days 0 hours 0 mins 0.00 secs'
    },    
    {
      JobName:'Truc_Astuce',
      LastFinishOperation:'2021-12-01',
      LastStartOperation:'2021-12-01',
      Time:'0 years 0 mons 0 days 0 hours 0 mins 0.00 secs'
    }
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

这是 App.module.ts 文件的内容：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import{ HttpClientModule } from "@angular/common/http";
import { RouterModule, Routes } from '@angular/router';
import { JoblogComponent } from './joblog/joblog.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthComponent } from './auth/auth.component';
import { from } from 'rxjs';

const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
const appRoutes: Routes = [
  {path:'dashboard', component: DashboardComponent},
  {path:'auth', component: AuthComponent},
  {path:'joblogs', component: JoblogComponent},
  {path: '', component: DashboardComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    AuthComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule, 
    HttpClientModule,
    RouterModule.forRoot(appRoutes)    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您应该将组件添加到声明数组中：

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    AuthComponent,
    JoblogComponent
  ],