Question

我有一个正在处理的简单项目，该项目可以编译并且不显示任何错误，但是在运行时不返回任何数据。我应该从哪里开始弄清楚为什么它不显示任何数据？我对Web开发和Angular BTW相当陌生...

路由有效，但我得到的只是html文件中的两个“标头” 9次，没有实际数据。我知道API可以通过邮递员的测试来工作。

非常感谢您的想法和技巧。

Service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const apiUrl = 'http://webserver/API/datafile';

export interface Datafile {
  Id?: string;
  DataFileLayoutID: number;
  HasScheduleA: string;
  ShowInEligibilityViewer: string;
}

@Injectable()
export class DatafileLoader {
  constructor(private http: HttpClient) {}

  getList(): Observable<Datafile[]> {
    return this.http
      .get<Datafile[]>(apiUrl)
      .pipe(map(longList => longList.slice(0, 9)));
  }

  getDetails(datafileId: string): Observable<Datafile> {
    return this.http.get<Datafile>(
      `${apiUrl}/${datafileId}`
    );
  }
}

list.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

import { Datafile, DatafileLoader } from '../datafile-loader.service';

@Component({
  selector: 'edx-datafile-list',
  templateUrl: './datafile-list.component.html'
})
export class DatafileListComponent {
  list: Observable<Datafile[]>;

  constructor(loader: DatafileLoader) {
    this.list = loader.getList();
  }
}


html

<section class="card">
  <div class="card-content">
    <div class="card-title">Select Datafile</div>
    <ul class="collection">
      <li
        class="collection-item"
        *ngFor="let l of list | async"
      >
      DatafileID: {{ l.Id }} LayoutId: {{ l.DataFileLayoutID}}
      </li>
     </ul>
  </div>
</section>

通过添加点击功能，使用控制台输出进行编辑…

Angular在开发模式下运行。调用enableProdMode（）以启用生产模式。 ContentScript.js：112 onResRdy中的异常：TypeError：无法读取未定义的属性'htmlRes' datafile-loader.service.ts：20（9）[{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}] 0 ：{id：“ 00000035-0075-0000-0000-000000000000”，createdByID：“ SB25”，createdDate：“ 2019-06-20T19：53：44.26”，modifiedByID：“ SB25”，ModifyDate：“ 2019-06-20T19 ：53：44.26“，…} 1：{id：” 00000035-0066-0000-0000-000000000000“，createdByID：” SB25“，createdDate：” 2019-02-21T20：19：20.08“，modifiedByID：” SB25“ ，修改日期：“ 2019-02-21T20：19：20.08”，…} 2：{id：“ 00000035-0072-0000-0000-000000000000”，createdByID：“ SB25”，创建日期：“ 2019-02-21T20：19 ：20.08“，已修改ByID：” SB25“，已修改日期：” 2019-02-21T20：19：20.08“，…} 3：{id：” 00000035-0070-0000-0000-000000000000“，createdByID：” SB25“，createdDate ：“ 2019-02-21T20：19：20.08”，已修改ByID：“ SB25”，已修改日期：“ 2019-02-21T20：19：20.08”，…} 4：{id：“ 00000035-0073-0000-0000-000000000000 “，createdByID：” SB25“，createdDate：” 2019-02-21T20：19：20.093“，ModifyByID：” SB25“，ModifyDate：” 2019-02-21T20：19：20.093“，…} 5：{id： 00000035-0055-00 00-0000-000000000000“，createdByID：” SB25“，createdDate：” 2019-02-21T20：19：20.08“，modifiedByID：” SB25“，ModifyDate：” 2019-02-21T20：19：20.08“，…} 6 ：{id：“ 00000035-0071-0000-0000-000000000000”，createdByID：“ SB25”，createdDate：“ 2019-02-21T20：19：20.08”，modifiedByID：“ SB25”，ModifyDate：“ 2019-02-21T20 ：19：20.08“，…} 7：{id：” 00000035-0067-0000-0000-000000000000“，createdByID：” SB25“，createdDate：” 2019-02-21T20：19：20.08“，modifiedByID：” SB25“ ，修改日期：“ 2019-02-21T20：19：20.08”，…} 8：{id：“ 00000035-0074-0000-0000-000000000000”，createdByID：“ SB25”，创建日期：“ 2019-05-02T19：42 ：51.617“，修改ID为：” SB25“，修改日期为：” 2019-05-02T19：42：51.617“，…}长度：9__proto__：Array（0）客户端：52 [WDS]启用了实时重新加载。

似乎肯定是从API中提取数据，并且很明显我的打字稿技能很弱，这是显示数据时遇到的问题。

Answer 1

您的数据结构不匹配。我们没有看到数据中的所有属性，但是可以看到的是，您正在尝试使用l.Id和大写字母i显示ID。但是您的数据包含属性id。这很重要。您需要更改模型以匹配您的数据，并且可以通过以下方式显示ID：

<li *ngFor="let l of list | async">
  DatafileID: {{ l.id }}
</li>

解决无数据显示问题

1 个答案: