无法绑定到“ngForOf”，因为它不是“ng-container”的已知属性

Question

我正在尝试在表格中显示数据库中的一些数据，我收到此错误，我在网上找到的唯一解决方案是导入 CommonModule 和 NgModule，我已经在这样做了，所以我不明白出了什么问题。 这只发生在这个组件中，不会发生在同一模块中的其他组件中：

Can't bind to 'ngForOf' since it isn't a known property of 'ng-container'.

我收到的数据：

{"body":[{"id":"2","uid":"100002","name":"Telt","created":"2020-12-06 16:53:08","location":"Huset","status":"","weight":"10","size":"NULL","content":"","image":"","comment":"Test"},{"id":"3","uid":"100003","name":"Kano","created":"2020-12-06 17:28:48","location":null,"status":"{\"status\":\"I\",\"user\":\"root\",\"timeStamp\":\"NULL\"}","weight":null,"size":"{\"dimentions\":{\"x\":\"0\", \"y\":\"0\", \"z\":\"0\", \"r\":\"0\"}, \"volume\":\"0\", \"properties\":{\"cube\":\"true\", \"ball\":\"false\", \"cylinder\":\"false\"}}","content":"{\"content\":[{\"invId\":\"NULL\", \"number\":\"0\"}], \"totalWeight\":\"0\"}","image":"\/assets\/images\/default.png","comment":null},{"id":"4","uid":"100004","name":"idk","created":"2020-12-06 17:54:58","location":null,"status":"{\"status\":\"I\",\"user\":\"root\",\"timeStamp\":\"NULL\"}","weight":null,"size":"{\"dimentions\":{\"x\":\"0\", \"y\":\"0\", \"z\":\"0\", \"r\":\"0\"}, \"volume\":\"0\", \"properties\":{\"cube\":\"true\", \"ball\":\"false\", \"cylinder\":\"false\"}}","content":"{\"content\":[{\"invId\":\"NULL\", \"number\":\"0\"}], \"totalWeight\":\"0\"}","image":"\/assets\/images\/default.png","comment":null}],"itemCount":3}

admin.component.ts：

import { InventarService } from './../inventar.service';
import { Inventar } from './../inventar';
import { Component, OnInit } from '@angular/core';




@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss'],
})
export class AdminComponent implements OnInit {
  inventar: Inventar[];
  error = '';
  success = '';

  constructor(private inventarService: InventarService) { }

  ngOnInit() {
    this.getInventar();
  }

  getInventar(): void {
    this.inventarService.getAll().subscribe((res: Inventar[]) => {
      this.inventar = res['body'];
    },
    (err) => {
      this.error = err;
    });
  }

}
  

admin.component.html：

  <ion-header [translucent]="true">
      <app-navbar></app-navbar>
    </ion-header>
    
    
    <ion-content>
      <ion-grid fixed>
        <ion-row  class="ion-text-center ion-padding-top">
          <ion-col size="12">
            <ion-title>Admin</ion-title>
          </ion-col>
        </ion-row>
      </ion-grid>
    
      <div *ngIf="error">{{error}}</div>
    <div *ngIf="success">{{success}}</div>
        
    <div id="theList">
      <table>
        <thead>
          <tr>
            <th>Navn</th>
            <th>UID</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let inv of this.inventar">
            <tr>
              <td> {{ inv['name'] }} </td>
              <td> {{ inv['uid'] }} </td>
              <td> {{ inv['status'] }} </td>
            </tr>
          </ng-container>
          
        </tbody>
      </table>
    
    
    
      
    </div>
      
    </ion-content>

Answer 1

Angular 不会在 HTML 中绑定 this 关键字，而是在 HTML 中不使用 this. 关键字来使用它。所以根据你的代码，你只需要改变

<ng-container *ngFor="let inv of this.inventar">

收件人：

<ng-container *ngFor="let inv of inventar">

Answer 2

存在以下问题。

1. BrowserModule 只能导入到您的 AppModule 中。从 homemodule 中删除它。

2. 将您的 AdminComponent 和 NavbarComponent 从 HomeModule 移动到 AppModule。