Angular 角度对象将不会映射

我有一个来自c#API的对象列表，对象的json结构是：

{
"limitId": 1,
"limitText": "Testing 3",
"limitCreated": "2021-05-12T22:14:45.7133333",
"limitActive": true,
"personId": 1,
"limitType": {
    "limitTypeId": 3,
    "limitTypeText": "Open To Exploration",
    "limitTypeActive": true
  }
}

在我的angular应用程序中，我有以下模型来接受JSON负载：

getLimits.ts

export interface LimitType {
limitTypeId: number;
limitTypeText: string;
limitTypeActive: boolean;
}

export interface GetLimits {
limitId: number;
limitText: string;
limitCreated: Date;
limitActive: boolean;
personId: number;
limitType: LimitType;
} 

getLimits():Observable<GetLimits[]>{
console.log('In here');
var apiURL = this.api.getApiEndPointByName('GetLimits');
var returnable = this.http.get<GetLimits[]>(apiURL);
return returnable;
}

要获取此数据，我需要执行以下操作：

        <tr *ngFor="let row of limits">
                                  {{row}}
                                  <td>{{row.LimitId}}</td>
                                  <td>{{row.LimitText}}</td>

                                  <td class="td-actions text-left">
                                    <button mat-raised-button type="button" class="btn btn-link btn-success" onclick="alert(row.LimitId)">
                                        <i class="material-icons">edit</i>
                                    </button>
                                    <button mat-raised-button type="button" class="btn btn-danger btn-link">
                                        <i class="material-icons">close</i>
                                    </button>
                                </td>
                              </tr>

限制.服务.ts

export interface LimitType {
limitTypeId: number;
limitTypeText: string;
limitTypeActive: boolean;
}

export interface GetLimits {
limitId: number;
limitText: string;
limitCreated: Date;
limitActive: boolean;
personId: number;
limitType: LimitType;
} 

getLimits():Observable<GetLimits[]>{
console.log('In here');
var apiURL = this.api.getApiEndPointByName('GetLimits');
var returnable = this.http.get<GetLimits[]>(apiURL);
return returnable;
}

执行此操作后，this.limits返回一个空数组。 我不知道为什么

希望任何知道我做错了什么的人都能帮我：(

更新

我正在用几种方法检查结果

在GetLimits组件中，我在将可观测值分配给公共限制之前执行console.log。 这将返回：

{
  "limitId": 1,
  "limitText": "Testing 3",
  "limitCreated": "2021-05-12T22:14:45.7133333",
  "limitActive": true,
  "personId": 1,
  "limitType": {
     "limitTypeId": 3,
     "limitTypeText": "Open To Exploration",
     "limitTypeActive": true
  }
}

然后，我在html中执行以下操作：

        <tr *ngFor="let row of limits">
                                  {{row}}
                                  <td>{{row.LimitId}}</td>
                                  <td>{{row.LimitText}}</td>

                                  <td class="td-actions text-left">
                                    <button mat-raised-button type="button" class="btn btn-link btn-success" onclick="alert(row.LimitId)">
                                        <i class="material-icons">edit</i>
                                    </button>
                                    <button mat-raised-button type="button" class="btn btn-danger btn-link">
                                        <i class="material-icons">close</i>
                                    </button>
                                </td>
                              </tr>

我还通过控制台注销此操作的结果。限制返回：

[]

{{row.LimitId}
{{row.LimitText}}

---

将

LimitId

更改为

LimitId

，将

LimitText

更改为

LimitText

，问题已在注释中解决，但我将在此处给出解决问题的规范方法：

组件技术

   public limits$: Observable<GetLimits[]>;

   ngOnInit() {
       this.limits$ = this.limitsService.getLimits()
                          // .pipe(
                          //     tap(data=>console.log(data)),
                          //     map(data => transformData(data))
                          // )
                          //
                          //  you can debug via the rxjs pipable operator tap and map via...map
   }

公共限额$：可见；
恩戈尼尼特（）{
this.limits$=this.limitsService.getLimits（）
//.烟斗(
//点击（数据=>console.log（数据）），
//映射（数据=>transformData（数据））
// )
//
//您可以通过rxjs pipable操作符进行调试，并通过…map进行映射
}

component.html

    <tr *ngFor="let row of limits$ | async">
        {{ row | json}}
    </tr>

{{row | json}}

什么时候调用

getLimits（）

？如何以及何时检查

this.limits

是否为空？是否后端未返回空数组？您在浏览器的“网络”选项卡中看到了什么响应？或者您是否已经测试了后端（例如，使用邮递员）？@igor如果你

console.log（this.limits）

在

ngOnInit

中，我将把我如何检查这一点添加到问题中，它将是

[]

。这是可观察的性质。另外

{row}

是

[object object]

。如果你想更清楚地查看它，请使用

{row}{json}

。就如何呈现可观察对象而言，

{{row.LimitId}}

等应该可以工作。@AndrewAllen{{row | json}}哇！非常感谢，这使得调试变得非常容易。这个问题在limit中被大写为L。