在Angular 5中循环遍历JSON对象并显示在表

Question

我是以JSON格式来自Web API的列表，我使用RXJS从web api读取数据并设置绑定为强类型的observable。我需要在模板中打印出这些值

接口

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

我设置了observable的

组件

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

Answer 1

编辑： 错误消息表明您没有在应用程序的根模块中导入BrowserModule。首先导入BrowserModule。

然后在模板中，尝试替换

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

与

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

Answer 2

这可能会有所帮助，Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)。

你可以尝试这个问题的两个建议（很可能是第二个）：

  

如果它是根模块，则在@NgModule（）中添加BrowserModule到导入：[]，否则为CommonModule。

和

  

您必须导入＆＃39; CommonModule＆＃39;在您使用这些内置指令的组件中，如ngFor，ngIf等。