在* ngfor Angular 2中顯示[Object] [Object]

Question

我正在從角度向Controller發出請求，因為我已經檢查了http請求，並且響應包含具有其屬性的對象的集合，所以它起作用了。 問題是使用*ngfor在html視圖中顯示那些對象...我正在使用名為JobsService的服務：

@Injectable()
export class JobsService {
    private _jobsUrl = 'http://localhost:59164/jobs';
    constructor(private _http: Http) { }

    getJobs(): Observable<Job[]> {
        return this._http.get(this._jobsUrl).map((response: Response) => <Job>response.json())
            .do(data => console.log('All: ' + JSON.parse(JSON.stringify(data)))).catch(this.handleError);
    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json() || 'Server error')
    }
}

這是JobsComponent類：

import { Component, OnInit } from '@angular/core';
import { JobsService } from './jobs.service';
import { Job } from './job';

@Component({
    templateUrl: './tsScripts/jobs/jobs.component.html',
    providers: [JobsService]
})

export class JobsComponent implements OnInit {
    jobs: Job[] = [];
    errorMessage: string;

    ngOnInit(): void {
        console.log("in OnInit");     
        this._jobsService.getJobs().subscribe(jobs => this.jobs = jobs, error => this.errorMessage = <any>error);
    }  

    constructor(private _jobsService: JobsService) {

    }
}

這是html頁面：

<table class="table"> <!--*ngIf="jobs && jobs.length"-->
    <tr *ngFor="let job of jobs">
        <td>{{job.Title}}</td>
    </tr>
</table>

我收到此錯誤：

嘗試與'[object Object]'進行比較時出錯。 僅允許數組和可迭代

我認為這是在抱怨，因為期望有一個數組並且只是得到一個對象，如果是這樣的話，我該如何解決呢？ 我以為我組件中的可變jobs是Job類的數組...

以防萬一這是Job類：

export class Job {
    aut_id: number;
    Title: string;
    Description: string;
    AuthorEmail: string;
    Company: string;
    Location: string;
    TypeOfJob: string;
    Salary: number;
    CandidateExperience: string;
    CandidateEducation: string;
    Language: string;
    Approved: string;
}

這是C＃控制器：

  public JsonResult Index()
        {
            AzureStorageHelper az = new AzureStorageHelper();
            var totalJobs = az.GetJobs();
            var result = totalJobs.Where(j => string.Equals(j.Approved, "Approved", StringComparison.CurrentCultureIgnoreCase));
            var test = result.ToList();
            return Json(new { data = test }, JsonRequestBehavior.AllowGet);  
        }

更新：

Answer 1

要轉換響應，最好使用一個接口並將結果映射到自己的類。

我向您建議此代碼：

@Injectable()
export class JobsService {
  private _jobsUrl = 'http://localhost:59164/jobs';
  constructor(private _http: Http) { }

  getJobs(): Observable<Job[]> {
    return this._http.get(this._jobsUrl).map(response => response.json().map(job => this.mapToJob(job)))
      .do(data => console.log('All: ' + JSON.parse(JSON.stringify(data)))).catch(this.handleError);
  }

  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json() || 'Server error')
  }

  private mapToJob(job: JobDTO): Job {
    return new Job(
      +job.aut_id,
      job.Title,
      job.Description,
      job.AuthorEmail,
      job.Company,
      job.Location,
      job.TypeOfJob,
      +job.Salary,
      job.CandidateExperience,
      job.CandidateEducation,
      job.Language,
      job.Approved
    )
  }

}

export class Job{
  aut_id: number;
  Title: string;
  Description: string;
  AuthorEmail: string;
  Company: string;
  Location: string;
  TypeOfJob: string;
  Salary: number;
  CandidateExperience: string;
  CandidateEducation: string;
  Language: string;
  Approved: string;
}


export interface JobDTO{
  aut_id: number;
  Title: string;
  Description: string;
  AuthorEmail: string;
  Company: string;
  Location: string;
  TypeOfJob: string;
  Salary: number;
  CandidateExperience: string;
  CandidateEducation: string;
  Language: string;
  Approved: string;
}

要投射API，我使用一個稱為DTO（數據傳輸對象）的接口，該接口有助於構建我的項目知道的作業。

目前，DTO和類具有相同的字段，但是可能有所不同。

注意另一件事： response.json().map(job => this.mapToJob(job))因為我認為您的JSON返回數組？ 因此，我將其映射為具有喬布斯數組。