วนซ้ำผ่านวัตถุ JSON ใน Angular 5 และแสดงในตาราง

ฉันเป็นรายการที่มาจาก Web API ในรูปแบบ JSON และฉันใช้ RXJS เพื่ออ่านข้อมูลจาก web api และตั้งค่าที่สังเกตได้ซึ่งผูกไว้กับการพิมพ์อย่างยิ่ง ฉันต้องพิมพ์ค่าเหล่านี้ในเทมเพลต

อินเตอร์เฟซ

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

}

บริการ

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

องค์ประกอบที่ฉันตั้งค่าให้สังเกตได้

constructor(private unitTestingService: ServerFlowTestService 

 ) { 

this.unitTest1 = unitTestingService.getServerFlowTest1();

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

}

แม่แบบ

สิ่งนี้ใช้งานได้ แต่แสดงเพียงวัตถุ

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

สิ่งนี้ใช้งานไม่ได้ซึ่งต้องการความช่วยเหลือ

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

ส่งคืนวัตถุ 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
  }
]

ข้อผิดพลาด

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