Angular - 表格数据在网页上显示为 NaN

Question

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

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-list.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';   
import { TestTableTburnsListComponent } from './test-table-tburns-list.component';

describe('TestTableTburnsListComponent', () => {
  let component: TestTableTburnsListComponent;
  let fixture: ComponentFixture<TestTableTburnsListComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestTableTburnsListComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestTableTburnsListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

test-table-tburns-list.component.ts

import { Component, OnInit } from '@angular/core';
import { TestTableTburnsApiService } from '../../../services/test-table-tburns-api.service';
import { TestTableTburnsModel } from '../../../models/test-table-tburns-model';

@Component({
  selector: 'app-test-table-tburns-list',
  templateUrl: './test-table-tburns-list.component.html',
  styleUrls: ['./test-table-tburns-list.component.css']
})
export class TestTableTburnsListComponent implements OnInit {
  testTableTburnsList: Array<TestTableTburnsModel>;
  title = "Hello TestTableTburns List";


  constructor(private testTableTburnsApi: TestTableTburnsApiService) { }

  ngOnInit() {
    this.testTableTburnsApi
    .getTestTableTburns()
    .subscribe(_ => this.testTableTburnsList = _, e => console.log(e));
  }

}

test-table-tburns-api.service.spec.ts

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();
  }));
});

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();
      })
      ;
  }
}

Answer 1

原因是，您使用的是破折号，即 - 在您的 *ngFor 中，这是不允许的，因为它会被视为减法，因此 Angular 正确指出减法的结果不是号码，又名NaN。所以使用没有破折号的命名约定：

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

同样在这种情况下，在迭代数组时不需要安全导航运算符，因此如果 testTableTburnsList 是假的，它不会尝试显示数组中的单个对象，除非有值。

Answer 2

javascript/typescript 中不存在 monadic null 检查。所以你可以删除那些'？在模板中。

错误TypeError: Cannot read property 'id' of undefined 告诉您属性testTableTburnsList 是一个包含至少一个等于未定义项的数组。您应该尝试在模板中添加{{ testTableTburnsList | json }} 以了解您的问题（可能位于TestTableTburnsApiService）