Loop through JSON Object in Angular 5 and display in table

Question

I am list coming from Web API in JSON format and I used RXJS to read data from web api and set observable that is bound to strongly typed. I need to print out these values in template

interface

export interface IMessageA{
id: number;
title: string;
detail: string;

}

Service

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import{ IMessageA } from '../../../Interfaces/UnitTest/TestMessageA';

@Injectable()

export class ServerFlowTestService{

 private developmentBaseUrl: string = 'https://localhost:44370/';

 constructor(private http: Http){}

 public getMessageFromWebAPI_T1():Observable<IMessageA[]>
 {
    return this.http.get(this.developmentBaseUrl+ '/ant/analysis/GetMessage')
                    .map((response:Response)=> <IMessageA[]>response.json())

  }
    public getServerFlowTest1():string{
      return "this is test 1";
   }
  }

component where I have set observable

constructor(private unitTestingService: ServerFlowTestService 

 ) { 

this.unitTest1 = unitTestingService.getServerFlowTest1();

 this.unitTestingService.getMessageFromWebAPI_T1()
                      .subscribe((messageA_Data) => this.unitTestA = messageA_Data);

}

Template

this is working but showing just object

 <div class="animated fadeIn">
   Server Flow Test 1:: {{unitTestA}}
 </div> 

This is not working, where need help

<div class="table-responsive">
   <table class="table" *ngIf='unitTestA && unitTestA.length'>
     <thead>
        <tr>             
              <th>Id</th>
              <th>Message</th>
              <th>Detail</th>              
        </tr> 
     </thead>
    <tbody>
      <tr *ngFor ="let messages of unitTestA">
          <td>{{messages.id }}</td>
          <td>{{messages.title }}</td>
          <td>{{messages.detail}}</td>
      </tr>
    </tbody>
 </table>
</div>   

Return json object

[
  {
    "id": 1,
    "name": "item A",
    "isComplete": true
  },
  {
    "id": 2,
    "name": "item B",
    "isComplete": false
  },
  {
    "id": 3,
    "name": "item C",
    "isComplete": true
  },
  {
    "id": 4,
    "name": "item D",
    "isComplete": true
  }
]

error

 Can't bind to 'ngForOf' since it isn't a known property of 'tr'. ("
  </thead>
  <tbody>
      <tr [ERROR ->]*ngFor ="let messages of unitTestA">
          <td>{{messages.id }}</td>
          <td>{{me"): ng:///DashboardModule/DashboardComponent.html@23:14
 Property binding ngForOf not used by any directive on an embedded template. 
 Make sure that the property name is spelled correctly and all directives 
 are listed in the "@NgModule.declarations". ("
  </thead>
  <tbody>
      [ERROR ->]<tr *ngFor ="let messages of unitTestA">
          <td>{{messages.id }}</td>
          <td>"): ng:///DashboardModule/DashboardComponent.html@23:10
 Can't bind to 'ngIf' since it isn't a known property of 'table'. ("

 <div class="table-responsive">
 <table class="table" [ERROR ->]*ngIf='unitTestA?.length > 0'>
    <thead>
      <tr>             
    "): ng:///DashboardModule/DashboardComponent.html@14:23
 Property binding ngIf not used by any directive on an embedded template. 
 Make sure that the property name is spelled correctly and all directives 
 are listed in the "@NgModule.declarations". ("

  <div class="table-responsive">
   [ERROR ->]<table class="table" *ngIf='unitTestA?.length > 0'>
     <thead>
      <tr>             
  "): ng:///DashboardModule/DashboardComponent.html@14:2
  Error: Template parse errors:
  Can't bind to 'ngForOf' since it isn't a known property of 'tr'. ("
    </thead>
      <tbody>
      <tr [ERROR ->]*ngFor ="let messages of unitTestA">
          <td>{{messages.id }}</td>
          <td>{{me"): ng:///DashboardModule/DashboardComponent.html@23:14
    Property binding ngForOf not used by any directive on an embedded 
     template. Make sure that the property name is spelled correctly and all 
   directives are listed in the "@NgModule.declarations". ("
  </thead>
  <tbody>
      [ERROR ->]<tr *ngFor ="let messages of unitTestA">
          <td>{{messages.id }}</td>
          <td>"): ng:///DashboardModule/DashboardComponent.html@23:10
  Can't bind to 'ngIf' since it isn't a known property of 'table'. ("

Answer 1

Edit: The error message indicates you don't have BrowserModule imports in the root module of your application. Import BrowserModule first.

Then in the template, try replacing

<table class="table" *ngIf='unitTestA && unitTestA.length'>

with

<table class="table" *ngIf='unitTestA?.length > 0'>

Answer 2

This may be helpful, Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release).

Two suggestion from that question you can try (most likely the second):

Add BrowserModule to imports: [] in @NgModule() if it's the root module, otherwise the CommonModule.

and

You have to import 'CommonModule' in the component where you are using these in-built directives like ngFor,ngIf etc.