无法绑定到"ngForOf",因为它不是'ng-container'的已知属性



我试图在表中显示数据库中的一些数据,我收到了这个错误,我在网上找到的唯一解决方案是导入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>

存在以下问题。

  1. BrowserModule应仅在AppModule中导入。将其从主模块中卸下。

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

Angular在HTML中不绑定this关键字,而是在没有this的情况下使用它HTML中的关键字。所以根据你的代码,你只需要更改

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

收件人:

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

最新更新