Angular - 无法访问 json-返回的 class 特定值(angular 5,entity framework 核心与 c# 后端)
Angular - can't access to a json-returned class specific value (angular 5, entity framework core with c# back-end)
我是 Angular 的新手,我正在尝试扩展 Google 的 Angular "Tour of Heroes" example.
我实际上已经将此示例改编为 Entity Framework 基于核心的后端。
现在,我的应用程序使用 Entity Framework 核心从数据库中获取英雄,我还创建了一个新的 table 关系,其中包含英雄的力量(英雄可以拥有一个权势,一个权势,就可以拥有不止一个英雄。
我在列表中显示此权力时遇到了问题。
我的 .ts class 是这样的:
export class Power {
id: number;
powerdescription: string;
hero: Hero[];
}
而服务返回的JSON是这样的:
[
{"id":1,"powerDescription":"PowerA","hero":[]},
{"id":2,"powerDescription":"PowerB","hero":[]},
{"id":3,"powerDescription":"PowerC","hero":[]},
{"id":4,"powerDescription":"PowerD","hero":[]}
]
我获取权限的方法是这样的:
/** GET powers from the server */
getPowers(): Observable<Power[]> {
return this.http.get<Power[]>(this.powersUrl)
.pipe(
tap(powers => this.log(`fetched powers`)),
catchError(this.handleError('getPowers', []))
);
}
我的后台也给大家分享一下"Power"class:
[Table("Power")]
public partial class Power
{
public Power()
{
Hero = new HashSet<Hero>();
}
public int Id { get; set; }
public string PowerDescription { get; set; }
public ICollection<Hero> Hero { get; set; }
}
和我的控制器的 get 方法:
[HttpGet]
public IActionResult Get()
{
var powers = _context.Powers;
return Ok(powers);
}
问题是,如果我尝试访问 power.description,我什么也得不到。
其实我觉得问题可能出在JSON末尾的hero数组是空的(power0现在被25个英雄使用了)
我该如何解决这个问题?
PS:如果您需要更多信息,请告诉我
更新:
我正在使用动态列表来显示权力。这是 HTML:
<div class="container">
<ul>
<li *ngFor="let power of powers">
<span class="badge"> power id = {{power.id}} </span>
<span class="badge"> power desc = {{power.powerdescription}} </span>
<span class="badge"> power heroes = {{power.hero}} </span>
</li>
</ul>
</div>
结果是我只显示了 ID 而没有显示描述
我回答我自己的问题。
答案只是:"pay attention to uppercase".
我更好地解释了自己。
由 back-end 生成的 JSON 更改变量的第一个大写字母,但不更改变量名称中其他最终的大写字母。
例如:如果变量名为 "Value",则 JSON 变量将被命名为 "value",但如果变量名为 "MyValue",则 JSON 变量将被命名为 "myValue"。
front-end angular 变量的命名必须与 JSON 变量完全相同,因为 JSON 值和 angular 变量之间的关联是通过名称进行的,并且它是区分大小写。
希望这个回答对其他angular初学者也有帮助
我是 Angular 的新手,我正在尝试扩展 Google 的 Angular "Tour of Heroes" example.
我实际上已经将此示例改编为 Entity Framework 基于核心的后端。
现在,我的应用程序使用 Entity Framework 核心从数据库中获取英雄,我还创建了一个新的 table 关系,其中包含英雄的力量(英雄可以拥有一个权势,一个权势,就可以拥有不止一个英雄。
我在列表中显示此权力时遇到了问题。 我的 .ts class 是这样的:
export class Power {
id: number;
powerdescription: string;
hero: Hero[];
}
而服务返回的JSON是这样的:
[
{"id":1,"powerDescription":"PowerA","hero":[]},
{"id":2,"powerDescription":"PowerB","hero":[]},
{"id":3,"powerDescription":"PowerC","hero":[]},
{"id":4,"powerDescription":"PowerD","hero":[]}
]
我获取权限的方法是这样的:
/** GET powers from the server */
getPowers(): Observable<Power[]> {
return this.http.get<Power[]>(this.powersUrl)
.pipe(
tap(powers => this.log(`fetched powers`)),
catchError(this.handleError('getPowers', []))
);
}
我的后台也给大家分享一下"Power"class:
[Table("Power")]
public partial class Power
{
public Power()
{
Hero = new HashSet<Hero>();
}
public int Id { get; set; }
public string PowerDescription { get; set; }
public ICollection<Hero> Hero { get; set; }
}
和我的控制器的 get 方法:
[HttpGet]
public IActionResult Get()
{
var powers = _context.Powers;
return Ok(powers);
}
问题是,如果我尝试访问 power.description,我什么也得不到。 其实我觉得问题可能出在JSON末尾的hero数组是空的(power0现在被25个英雄使用了)
我该如何解决这个问题?
PS:如果您需要更多信息,请告诉我
更新: 我正在使用动态列表来显示权力。这是 HTML:
<div class="container">
<ul>
<li *ngFor="let power of powers">
<span class="badge"> power id = {{power.id}} </span>
<span class="badge"> power desc = {{power.powerdescription}} </span>
<span class="badge"> power heroes = {{power.hero}} </span>
</li>
</ul>
</div>
结果是我只显示了 ID 而没有显示描述
我回答我自己的问题。
答案只是:"pay attention to uppercase".
我更好地解释了自己。
由 back-end 生成的 JSON 更改变量的第一个大写字母,但不更改变量名称中其他最终的大写字母。
例如:如果变量名为 "Value",则 JSON 变量将被命名为 "value",但如果变量名为 "MyValue",则 JSON 变量将被命名为 "myValue"。 front-end angular 变量的命名必须与 JSON 变量完全相同,因为 JSON 值和 angular 变量之间的关联是通过名称进行的,并且它是区分大小写。
希望这个回答对其他angular初学者也有帮助