Ulangi Objek JSON di Angular 5 dan tampilkan dalam tabel

Saya daftar berasal dari Web API dalam format JSON dan saya menggunakan RXJS untuk membaca data dari web api dan mengatur observable yang terikat untuk diketik dengan kuat. Saya perlu mencetak nilai-nilai ini dalam templat

antarmuka

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

}

Melayani

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";
   }
  }

komponen yang telah saya atur dapat diamati

constructor(private unitTestingService: ServerFlowTestService 

 ) { 

this.unitTest1 = unitTestingService.getServerFlowTest1();

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

}

Templat

ini berfungsi tetapi hanya menampilkan objek

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

Ini tidak berhasil, dimana butuh bantuan

<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>   

Kembalikan objek json

[
  {
    "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
  }
]

kesalahan

 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'. ("