c# – Angular HTTPClient doesn't show response from my WebApi and see variables as undefinied-ThrowExceptions

Exception or error:

I’m learning Angular and ASP.NET so I wanted to make simple WebApi, but in postman everything working accually fine, only issue is in my Angular application, I don’t know where so I am here for advice.

Here is my Angular .ts script responsible for getting data form local api:

import { Component, OnInit } from "@angular/core";
import { HttpClientModule } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

@Component({

  selector: "app-user",
  templateUrl: "./user.component.html",
  styleUrls: ["./user.component.css"]
})
export class UserComponent implements OnInit {
  values: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getValues();
    console.log();
  }

  getValues() {
    this.http.get('http://localhost:5000/api/DataCTX').subscribe(response => {
       this.values = response;
    }, error => {
       console.log(error);
      });
    }

    // przypisanie wartości do values, wypisywanie błędu

}

As I saw in debug logs it’s accually working, and it getting no errors.
In my WebApi (localhost:5000) i got some users data from database:

Here is model:

namespace WebAPI_1.Models
{
    public class Users
    {
        public int id { get; set; }
        public string Imie { get; set; }
        public string Nazwisko { get; set; }
        public string Login { get; set; }
        public string Haslo { get; set; }
    }
}

I wanted from my app to getting some of these values and write it down in html with this markups:

<p *ngFor="let a of values">
  {{values.id}} - {{values.Imie}}
</p>

But only thing I get is:

result in browser

So, I will be very happy if you want to help me, greetings 😀

How to solve:

You are accessing id and imie on the whole list instead of object a in foreach, so
try this:

<p *ngFor="let a of values">
  {{a.id}} - {{a.imie}}
</p>

Leave a Reply

Your email address will not be published. Required fields are marked *