What is wrong here.. Angular 4 with ASP .net webapi

Question

I have created an api using ASP .net WebApi to get a list of companies and get a single company. Service call GetCompanies works fine gets the data and prints the list. But, issues is with GetCompany service, it gets the company when I print it in log, but it does not get in the Company object. What am I doing wrong in the Angular Component and or Service. Any help is appreciated.

Here is the output of the application. GetCompanies lists all the companies, but GetCompany prints as [object Object]. . here is the output

Here is the screen shot of data coming from APIs.

This is 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);
  }
}

This is companies.service.ts

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


}

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

As you get data asynchronously you can use safe navigation operator like:

{{ company?.Name }}