3

I'm trying to display some data from a database in a table, im getting this error, the only solution ive found online is to import CommonModule and NgModule, which im already doing, so i dont understand whats wrong. This only happens in this component, not in other components in the same module:

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

The data I'm receiving:

{"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>
Martin
  • 65
  • 6
  • does this answer your question: https://stackoverflow.com/questions/40331549/cant-bind-to-ngforof-since-it-isnt-a-known-property-of-tr-final-release?rq=1 ? – griFlo Dec 09 '20 at 08:23
  • @griFlo Not really, I've made sure i have the CommonModule and BrowserModule imported in both the root module and the Home module this componens in in – Martin Dec 09 '20 at 08:28
  • can you provide a stackblitz? as i still suspect missing of module import. – Aakash Garg Dec 09 '20 at 08:38
  • @AakashGarg Here https://stackblitz.com/edit/ionic-5aoyp2 Ive never made one before so I'm unsure if it works, I just pulled the whole thing from my github repo – Martin Dec 09 '20 at 08:56
  • @Martin there is no ngFor used in your stackblitz. – Aakash Garg Dec 09 '20 at 10:19
  • @AakashGarg I think there is? In the src/app/admin/admin.component.html – Martin Dec 09 '20 at 11:35
  • @Martin i opened stackblitz link you gave, it doesn't show me admin.component.html – Aakash Garg Dec 09 '20 at 11:45
  • @AakashGarg Sorry ive never used stackblitz before, i don't know whats wrong. https://github.com/nitram9876/Inventar here is the github repo at least, maybe that is of some help? – Martin Dec 09 '20 at 18:09
  • @Martin i have added the solution below. – Aakash Garg Dec 09 '20 at 18:36

2 Answers2

1

Angular doesn't bind this keyword in HTML, instead you use it without this. keyword in HTML. So according to your code, you just need to change

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

To:

<ng-container *ngFor="let inv of inventar">
iftikharyk
  • 32
  • 5
1

There are following problems.

  1. BrowserModule should only be imported in your AppModule. Remove it from homemodule.

  2. Move your AdminComponent and NavbarComponent from HomeModule to AppModule.

Aakash Garg
  • 8,402
  • 2
  • 5
  • 19