title: How to I get data from working Web API in angular?
body: <p>Okay so I'm trying to get data from Web API that I made in angular. Web API is working I tested it using Postman and Postman gets the data from Web API just fine here is the screenshot of Postman getting the data from Web API  " <a href="http://prntscr.com/nr18ct" rel="nofollow noreferrer">http://prntscr.com/nr18ct</a> ". That makes me certain that it is a problem with angular. And I'm sorry if I don't make sense or if the rest of the question / post is f**ed up first time asking a question here.</p>
  
  <p>I did follow angular tutorial on Angular.io I really don't know what it could cause it, just to say it worked perfectly fine before I did the last part of the tutorial, that is trying to get data from Web API. My first thought was maybe I f**ed up something in PagedVehicleMake class in angular (typescript class) or VehicleMake class also in angular also typescript class</p>
  
  <p>Web API part:
  As you saw in the screen shot I sent before Web API sends that type of data.</p>
  
  <pre><code>    public class PagedResult&lt;T&gt; : IPagedResult&lt;T&gt; where T : class
  {
          public int PageNumber { get; set; }
          public int PageSize { get; set; }
          public int TotalNumberOfPages { get; set; }
          public IEnumerable&lt;T&gt; Results { get; set; }
  }
  </code></pre>
  
  <p>and IEnumrable Results in this case is IEnumrable Results
  and VehicleMakeVM is:</p>
  
  <pre><code>    public class VehicleMakeVM
  {
          public int Id { get; set; }
          public string Name { get; set; }
          public string Abrv { get; set; }
  }
  </code></pre>
  
  <p>Now for Angular part:</p>
  
  <pre><code>export class PagedVehicleMake{
      Results : VehicleMake[];
      TotalNumberOfPages : number;
      PageSize : number;
      PageNumber : number;
  }
  </code></pre>
  
  <p>I tried to arrange PagedVehicleMake class the same way data is sent to Postman showed in a screenshot I sent. I thought maybe it had something to do with that.</p>
  
  <pre><code>export class VehicleMake {
      Id : number;
      Name : string;
      Abrv : string;
  }
  </code></pre>
  
  <p>and here is the VehicleMakeService class in angular:</p>
  
  <pre><code>export class VehicleMakeService {
  
    constructor(private http: HttpClient, private messageService : MessageService) { }
    private vehiclemakesUrl = "http://localhost:53282/api/VehicleMake"
    /**GET vehiclemakes from the server */
    getVehicleMakes() : Observable&lt;PagedVehicleMake&gt;{
      this.messageService.add("VehicleMakeService : fetched VehicleMakes")
      return this.http.get&lt;PagedVehicleMake&gt;(this.vehiclemakesUrl).pipe(
        catchError(this.handleError&lt;PagedVehicleMake&gt;("getVehicleMakes", []))
        );
    }
      /**
     * Handle Http operation that failed.
     * Let the app continue.
     * @param operation - name of the operation that failed
     * @param result - optional value to return as the observable result
     */
    private handleError&lt;T&gt; (operation = 'operation', result?: T) {
      return (error: any): Observable&lt;T&gt; =&gt; {
  
        // TODO: send the error to remote logging infrastructure
        console.error(error); // log to console instead
  
        // TODO: better job of transforming error for user consumption
        this.log(`${operation} failed: ${error.message}`);
  
        // Let the app keep running by returning an empty result.
        return of(result as T);
      };
    }
      /** Log a VehicleMakeService message with the MessageService */
      private log(message: string) {
        this.messageService.add(`VehicleMakeService: ${message}`);
      }
  </code></pre>
  
  <p>I expected it to just get the data from WebAPI but it somehow isn't capable of getting the data.</p>