Angular 角度表数据在网页上显示为NaN

我已经被这个问题困扰了一段时间。我只是尝试将包含Id、Name和createdate列的表加载到页面中。我的API方法在Visual Studio中的控制器类中运行良好。我以前在控制台中遇到过以下错误：

TypeError:无法读取未定义的属性“id”

如果我删除

id

等，则

name

也会出现此错误

我做了一些研究，了解到我可以使用

？

elvis操作符，我已经将它实现到我的HTML中。实现elvis运算符后，错误消失，但所有表值现在显示为

NaN

。在“开发人员工具中的网络”下，我可以单击我的表名并查看在我的表中填充的数据

你知道问题是什么吗？我已包括以下代码：

test-table-tburns-list.component.html

<div>
  <table>
      <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Create Date</th>
      </tr>

      <tr *ngFor="let test-table-tburns of testTableTburnsList">
          <td>{{ test-table-tburns?.id }}</td>
          <td>{{ test-table-tburns?.name }}</td>
          <td>{{ test-table-tburns?.createDate }}</td>
      </tr>
  </table>
</div>

test-table-tburns-api.service.ts

import { Injectable } from '@angular/core'
import { Http, Response, Headers } from '@angular/http';
import { environment } from '../../environments/environment';
import 'rxjs/add/operator/map';

@Injectable()
export class TestTableTburnsApiService {

  domain : string;

  constructor(public http: Http){
      this.domain = environment.apiUrl;
  }

  public getTestTableTburns(){
      let uri = this.domain + `/api/test-table-tburns`;

      return this.http
      .get(uri)
      .map((res: Response) => {
          return res.json();
      })
      ;
  }
}

---

javascript/typescript中不存在一元空检查。因此，您可以删除模板中的“？”

---

错误

TypeError:无法读取未定义的属性“id”

告诉您该属性

testTableTburnsList

是一个数组，它包含至少一个等于未定义的项。您应该尝试在模板中添加

{{testTableTburnsList | json}

，以了解您的问题（可能位于

TestTableTburnsApiService

）

原因是，您在

*ngFor

中使用破折号，这是不允许的，因为它将被视为减法，因此，Angular正确地指出，减法的结果不是一个数字，也称为

NaN

。因此，使用不带破折号的命名约定：

<tr *ngFor="let test of testTableTburnsList">
  <td>{{test.id}}</td>
</tr>

{{test.id}

---

同样在这种情况下，在迭代数组时不需要使用安全导航操作符，因此如果

testTableTburnsList

为falsy，它将不会尝试显示数组中的单个对象，除非有值。

感谢您的回复。我从HTML中删除了

？

elvis操作符。我对您添加

{{testTableTburnsList | json}}

的请求有点困惑。你能帮我理解吗？我将API服务代码添加到我的原始帖子中。希望这会有所帮助。在模板中使用

{{testTableTburnsList | json}

可以查看属性

testTableTburnsList

的实际值。也许您应该在组件构造函数中将该属性实例化为

[]

，以避免undefined@WilliamKLEIN使用安全导航操作符在角。。。在模板中使用

{testTableTburnsList | json}

时，该表显示了6行null（表中有6个参与者）。另外，我以前使用过安全导航操作符，表中显示了每个值的位置。响应实际是什么样子的？在这种情况下显示

NaN

似乎很不寻常。我的意思是，您收到的响应看起来如何？JSON。响应为200“OK”。我看不出有任何问题。但是JSON响应是什么？您正在接收的数据：D复制粘贴一段JSON。希望我不会感到困惑。这就是你要找的吗？这是我收到的数据：[{“id”：1，“name”：“Tyler Burns”，“createDate”：“2018-01-18T15:31:47.12”}，{“id”：2，“name”：“John Smith”，“createDate”：“2018-01-18T15:35:22.333”}，{“id”：3，“name”：“Bob Jones”，“createDate”：“2018-01-18T15:35:22.333”}，{“id”：4，“name”：“Brian Hall”，“createDate”：“2018-01-18T15:35:22.333”}，{“id”库克，“name”，“createDate”：“艾米”：“2018-01-18T15:35:22.333”{“id”：7，“name”：“Test User”，“createDate”：“2018-01-22T20:51:55.22”}]如此微妙的事情怎么会让人头疼一天。谢谢你弄明白了这一点！是的，我也花了一段时间才看到它。当我尝试你的代码时，我意识到：我会有一个愉快的周末和愉快的编码！：）

import { TestBed, inject } from '@angular/core/testing';

import { TestTableTburnsApiService } from './test-table-tburns-api.service';

describe('TestTableTburnsApiService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [TestTableTburnsApiService]
    });
  });

  it('should be created', inject([TestTableTburnsApiService], (service: TestTableTburnsApiService) => {
    expect(service).toBeTruthy();
  }));
});

import { Injectable } from '@angular/core'
import { Http, Response, Headers } from '@angular/http';
import { environment } from '../../environments/environment';
import 'rxjs/add/operator/map';

@Injectable()
export class TestTableTburnsApiService {

  domain : string;

  constructor(public http: Http){
      this.domain = environment.apiUrl;
  }

  public getTestTableTburns(){
      let uri = this.domain + `/api/test-table-tburns`;

      return this.http
      .get(uri)
      .map((res: Response) => {
          return res.json();
      })
      ;
  }
}

<tr *ngFor="let test of testTableTburnsList">
  <td>{{test.id}}</td>
</tr>