ここで何が問題なのですか？ASP .net webapi

Question

ASP .net WebApiを使用して企業の一覧を取得し、単一の会社を取得するAPIを作成しました。サービスコールGetCompaniesは正常に動作し、データを取得してリストを出力します。しかし、問題はGetCompanyサービスで発生し、ログに記録すると会社になりますが、会社オブジェクトには入りません。 Angular Component and Serviceで何が間違っているのですか？どんな助けもありがとうございます。

ここにアプリケーションの出力を示します。 GetCompaniesはすべての企業をリストしますが、GetCompanyは[object Object]として出力します。 。 here is the output

Here is the screen shot of data coming from APIs.

これはcompanies.component.ts

import { Component, OnInit } from '@angular/core'; 
 
import { CompaniesService } from './companies.service'; 
 
import { Company } from './company.model'; 
 
@Component({ 
 
    selector: 'app-companies', 
 
    template: ` 
 
     <p> 
 
     company name = {{company}} 
 
     </p> 
 
     <ul> 
 
     <li *ngFor = "let c of companies"> {{c.Name}} - {{c.CompanyID}} </li> 
 
     </ul> 
 
    ` 
 
}) 
 
export class CompaniesComponent implements OnInit { 
 

 
    text: string; 
 
    errorMessage: string; 
 
    public company: Company; 
 
    public companies: Company[]; 
 

 
    constructor(private cService: CompaniesService) { } 
 

 
    ngOnInit() { 
 
    this.getCompanies(); 
 
    this.getCompany(5); 
 
    console.log(this.company); 
 
    } 
 

 
    getCompanies() { 
 
    return this.cService.getCompanies() 
 
     .subscribe(companies => this.companies = companies, 
 
     error => this.errorMessage =<any>error); 
 
    } 
 

 
    getCompany(id: number) { 
 
    return this.cService.getCompany(id) 
 
     .subscribe(company => this.company = company, 
 
     error => this.errorMessage =<any>error); 
 
    } 
 
}

これはcompanies.service.tsありますcompany.model.ts

export class Company { 
 
    CompanyID: number; 
 
    Name: string; 
 
    Description: string; 
 
    EmailAddress: string; 
 
    Phone: string; 
 
    Address: string; 
 
    CreatedBy: number; 
 
    CreatedDate: Date; 
 
    UpdatedBy: number; 
 
    UpdatedDate: Date; 
 
    IsActive: boolean; 
 
}

Answer 1

の

import { Injectable } from '@angular/core'; 
 
import { Http, Response } from '@angular/http'; 
 
import { Observable } from 'rxjs/Observable'; 
 
import { Headers, RequestOptions } from '@angular/http'; 
 
import 'rxjs/add/operator/catch'; 
 
import 'rxjs/add/operator/map'; 
 

 
import { Company } from './company.model'; 
 

 
@Injectable() 
 
export class CompaniesService { 
 

 
    constructor(private http: Http) { 
 
    } 
 

 
    getCompany(id: number): Observable<Company> { 
 
    return this.http.get(`api/getcompany/?id=${id}`) 
 
     .map ((res:Response) => res.json()) 
 
     .catch(this.handleError) ; 
 
    } 
 

 
    getCompanies(): Observable<Company[]> { 
 
    return this.http.get('api/getcompanies') 
 
     .map ((res:Response) => res.json()) 
 
     .catch(this.handleError) ; 
 
    } 
 

 
    private extractData(res: Response) { 
 
    let body = res.json(); 
 
    return body.data || []; 
 
    } 
 

 
    private handleError (error: Response | any) { 
 
    // In a real world app, you might use a remote logging infrastructure 
 
    let errMsg: string; 
 
    if (error instanceof Response) { 
 
     const body = error.json() || ''; 
 
     const err = body.error || JSON.stringify(body); 
 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
 
    } else { 
 
     errMsg = error.message ? error.message : error.toString(); 
 
    } 
 
    console.error(errMsg); 
 
    return Observable.throw(errMsg); 
 
    } 
 

 

 
}

コードあなたが非同期でデータを取得するとして、あなたは安全navigaを使用することができます

{{ company?.Name }}