Was ist los hier .. Angular 4 mit ASP .net webapi

Question

Ich habe eine API mit ASP .net WebApi erstellt, um eine Liste von Unternehmen zu erhalten und eine einzige Firma zu bekommen. Service Call GetCompanies funktioniert gut, holt die Daten und druckt die Liste. Probleme mit dem GetCompany-Dienst treten jedoch auf, wenn das Unternehmen im Protokoll gedruckt wird, aber nicht im Unternehmensobjekt. Was mache ich falsch in der Angular Component und/oder Service. Jede Hilfe wird geschätzt.

Hier ist die Ausgabe der Anwendung. GetCompanies listet alle Firmen auf, aber GetCompany druckt als [Objekt Objekt]. . here is the output

Here is the screen shot of data coming from APIs.

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

Dies ist 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 von 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

Wie Sie Daten erhalten asynchron können Sie sicher naviga verwenden Operator wie:

{{ company?.Name }}