Friday, 4 October 2019

Angular biding array of custom objects - uppercase/lowercase issue names of property from httpget

Description of what I am doing.

I am trying to display the table of my custom object comes from the server. I am calling the httpclient.get and cast the json to an array of my custom object (using build in functionality in httpclient) and in subscribe function submitting to own property. Next I am trying to display the content to the table using binding and *ngFor. After code section showing the issue. I am using Angular-8.

Code

All code is simplified to show a problem. I move also service to component for simplicity.

Simpliest class:

export class Person {
    public Name: string;
}

My component

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Person } from '../models/person';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  public persones: Array<Person>;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.getPeople();
  }

  private getPeople(): void {
    this.http.get<Array<Person>>('https://localhost:44368/api/person')
    .subscribe(      
      x => this.persones = x,
      () => console.log('error getting people')    
    );

  }
}

Html part

<div>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th>name lowercase</th>
        <th>Name Upercase</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let item of this.persones'>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

Problem

Problem is that in html the table with item.name (lowercase) is displaying and item.Name (uppercase) is not displaying and my own property has upercase letter for property. I was excepting and it is my experience that when cast to angular objects I should use property of these custom objects. I know that these lower case comes from json from server, but it should cast to objects from angular.

I was trying to do casting like using as or using Observable but was not help.

Also when I changing type of persnones and change type of getting cast I got the same result for example

public persones: string;
this.http.get<string> ...blabla...

I still got the same result so my persones property is treated like a typical json object.



from Angular biding array of custom objects - uppercase/lowercase issue names of property from httpget

No comments:

Post a Comment