javascript - 无法在 Angular 4 中显示单个 JSON 对象属性

Question

拜托，我需要帮助来显示单个 JSON 对象属性。

这是我的服务:

    import {  
    Injectable  
} from '@angular/core';  
import {  
    Http,  
    HttpModule,
    Headers,  
    RequestOptions,  
    Response  
} from '@angular/http'; 
import { HttpClientModule } from '@angular/common/http'; 
import {  
    Observable 

} from 'rxjs/Rx';  
import 'rxjs/Rx'; //get everything from Rx    
import 'rxjs/add/operator/toPromise';  
import {  
    IProduct  
} from "../models/iproduct"; 
@Injectable()  
export class ProcessJsonService {  
    constructor(private http: Http) {}  
    //    
    getProcesslist() {  
        return this.http.request('http://www.json-generator.com/api/json/get/bVOdrzTUeq?indent=0')
   .map(res => { console.log("I SEE DATA HERE: ", res.json())
       return res.json(); })

        }

    }  

我的 component.ts 文件:

    import { Component, OnInit } from '@angular/core';
import { IProduct } from "../models/iproduct";
import {  
  Http  
} from '@angular/http';   
import {  
  ProcessJsonService  
} from '../models/myjsonprocess';  
import {  
  Observable  
} from 'rxjs/Rx'; 
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

  pageTitle: string = 'Process List';
  imageWidth: number = 50;
  imageMargin: number = 2;
  showImage: boolean = false;
  listFilter: string = '';
  processList: IProduct[];  
  errorMessage: string;

  constructor(private _processJsonService: ProcessJsonService) {  
    this.processList = []; 
  }

  ngOnInit(): void {  
        this._processJsonService.getProcesslist()
        .subscribe(
        processList => this.processList = processList)
    } 
}

我的html代码:

    <div class='panel panel-primary'>
  <div class='panel-heading'>
    {{pageTitle}}
  </div>
  <div class='panel-body'>
    <div class='row'>
      <div class='col-md-2'>Filter by:</div>
      <div class='col-md-4'>
        <input type='text' [(ngModel)]='listFilter' />
      </div>
    </div>
    <div class='row'>
      <div class='col-md-4'>
        <h4>Filtered by: {{listFilter}} </h4>
      </div>
    </div>
        <div class='table-responsive'>
            <table class='table'
                   *ngIf='processList && processList.length'>
                <thead>
                    <tr>
                        <th>Process Name</th>
                        <th>Process Instance</th>
                        <th>Process Status</th>
                        <th>Temp-acked Messages Number</th>
                        <th>Unprocessed Messages Number</th>
                        <th>Deferred Messages Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let process of processlist | processFilter:listFilter" >
                        <td>{{ process.process_name }}</td>
                        <td>{{ process.instance  }}</td>
                        <td>{{ process.status }}</td>
                        <td>{{ process.tempacked_cmsg}}</td>
                        <td>{{ process.unprocessed_cmsg}}</td>
                        <td>{{ process.deferred_cmsg}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

问题是我没有在浏览器上显示数据，但是如果 URL 包含 JSON 数组，数据就会显示在浏览器中。

我在服务中添加了一个 console.log 以在控制台中显示 res.json 并且我得到了它。我在组件中尝试了相同的操作(在 ngOnInit 中)，但我没有在控制台中获取数据。这可能有助于找出问题所在。

请问有什么帮助吗？

Answer 1

你是说 getProcessList() 可以返回类似 [{...}, {...}, {...}] 和 (如果只有一个进程)将返回 {...}?

如果是这种情况，那么 ngFor 不会喜欢接收非列表的内容，所以这样做:

ngOnInit(): void {  
        this._processJsonService.getProcesslist()
        .subscribe(processList => {
            if (processList instanceof Array) {
                this.processList = processList;
            } else {
                this.processList = [processList];
            }
        });
}