Angular 自定义对象的出价数组 - uppercase/lowercase 从 httpget 发出属性的名称

Question

描述我在做什么。

我正在尝试显示来自服务器的自定义对象的 table。我正在调用 httpclient.get 并将 json 转换为我的自定义对象数组（使用 httpclient 中的内置功能）并在订阅函数中提交给自己的属性。接下来，我尝试使用绑定和 *ngFor 将内容显示到 table。在显示问题的代码部分之后。我正在使用 Angular-8。

代码

所有代码都经过简化以显示问题。为简单起见，我还将服务移至组件。

最简单的class：

export class Person {
    public Name: string;
}

我的组件

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部分

<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>{{ item.name }}</td>
        <td>{{ item.Name }}</td>
      </tr>
    </tbody>
  </table>
</div>

问题

问题是在 html 中显示带有 item.name（小写）的 table 和 item.Name（大写）是不显示，我自己的属性有属性的大写字母。我很例外，根据我的经验，当转换为 angular 对象时，我应该使用这些自定义对象的属性。我知道这些小写字母来自服务器的 json，但它应该转换为来自 angular 的对象。

我试图像使用 as 或使用 Observable 那样进行转换，但没有帮助。

此外，当我更改 persnones 的类型并更改 getting cast 的类型时，我得到了相同的结果，例如

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

我仍然得到相同的结果，所以我的角色属性被视为典型的 json 对象。

Answer 1

Typescript 是构建时构造 - 在运行时它是 JavaScript，类型无关紧要。它不会为你做任何神奇的映射，所以如果服务器 returns 一个名称小写的数组，这就是你会得到的。

诊断此问题的最佳方法是在开发人员工具中检查网络请求，并相应地调整您的类型，或者将传入对象映射到您想要的格式

Answer 2

我建议使用小写属性名称，因为这是 json 响应的默认行为。

不过，回答你的问题。这可以通过配置 OutputFormatter（.net 后端）

来解决

public void ConfigureServices(IServiceCollection services)
{
    // Add framework services.
    services.AddMvc()
        .AddMvcOptions(options =>
        {
            options.OutputFormatters.Add(new PascalCaseJsonProfileFormatter());
        });
}

Angular 自定义对象的出价数组 - uppercase/lowercase 从 httpget 发出属性的名称

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

http-get

subscribe

typescript

angular-components

angular

Angular 自定义对象的出价数组 - uppercase/lowercase 从 httpget 发出 属性 的名称

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

http-get

subscribe

typescript

angular-components

angular

Angular 自定义对象的出价数组 - uppercase/lowercase 从 httpget 发出属性的名称