角度对象不会映射答案

【问题标题】：Angular object will not map角度对象不会映射
【发布时间】：2021-08-02 19:30:05
【问题描述】：

我有一个来自 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;
}

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

Limits.service.ts

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

在我的组件中，我尝试将其直接映射到 GetLimits 数组：

   public limits: GetLimits[] = [];
   getLimits() {
   this.limitsService.getLimits()
    .subscribe(limit => {
        this.limits = limit
        console.log(limit)
    });
}

执行 this 时，this.limits 返回一个空数组。我不知道为什么！

希望知道我做错了什么的人提供帮助:(

更新

我正在通过几种方式检查结果，

在 GetLimits 组件中，我在将 observable 分配给公共限制之前执行了一个 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>

结果如下：

[object Object]

我还控制台注销返回的 this.limits 的结果：

[]

【问题讨论】：

何时调用getLimits()？您如何以及何时检查 this.limits 是否为空？
你是后端没有返回一个空数组吗？您在浏览器的网络选项卡中看到什么响应？或者您是否已经测试过后端（例如使用 Postman）？
@igor 我将如何检查这个问题添加到问题中
如果您在ngOnInit 中使用console.log(this.limits)，它将是[]。这就是可观察对象的本质。还有{{row}} 是 [object Object]。如果您想更清楚地查看它，请使用{{row | json}}。在如何渲染 observables 方面{{row.LimitId}} 等应该可以工作。
@AndrewAllen {{row | json}} 哇！非常感谢，这使调试变得更加容易。问题已限制为大写 L。

标签： angular

【解决方案1】：

<td>{{row.LimitId}}</td>
 <td>{{row.LimitText}}</td>

将LimitId 更改为limitId 并将LimitText 更改为limitText。

【讨论】：

【解决方案2】：

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

组件.ts

   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
   }

component.html

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

【讨论】：