json - 无法从 Angular InMemoryDbService 中得到任何东西

Question

所以我完成了 Angular 4 Heroes 教程，我想我已经准备好了。所以我创建了自己的项目，并想为自己尝试一些东西。不幸的是失败了。

我想做什么:我想使用内存数据库从中检索数据。在我的内存数据库中，我存储了一个学期数组，当我使用此端点调用 getSemesters() 时，我想将其作为学期数组返回:api/semesters。然后我想在列表中显示数据。不幸的是，该列表未显示(或以某种方式加载)。

我试图通过阅读一些文档和文档来研究这个问题:https://github.com/angular/in-memory-web-api 文档描述内存数据库假定有一个 ID。由于某些原因，我的学期对象不会使用 ID 字段。所以我想知道这可能是我的问题。在这种情况下，我将跳过使用内存数据库。

有人对我的问题有提示/改进/解释吗？

这是内存数据服务(我切掉了其他行以使其更小):

import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const semesters = [
      { 'semester': 1,
      'modules': [
        {'module_code': 'JAV1',
         'module_name': 'Programming in Java 1',       
          'credits': 5 },
        ]}
    ];
    return {semesters};
}

我的学期课:

import {Module} from './module';
export class Semester {
  semester: number;
  modules: Module[];
}

我的模块类:

export class Module{
  module_code: string;
  module_name: string;
  credits: number;
} 

我的后端模型服务:

@Injectable()
export class BackendMockupService {
  private headers = new Headers({'Content-type': 'application/json'});
  private semestersUrl = 'api/semesters';

  constructor(private http: Http) { }

  getSemesters(): Promise<Semester[]> {
    this.http.get(this.semestersUrl)
      .toPromise()
      .then(response => response.json().data as Semester[])
      .catch(this.handleError);
    return null;
  }


  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

我的 app.component.ts 文件:

@Component({
  selector: 'app-fmms',
  templateUrl: './app.html',
  styleUrls: ['./app.scss']
})
export class AppComponent implements OnInit {
  semesters: Semester[];

  constructor( private bms: BackendMockupService) {}

  getSemesters(): void {
    this.bms.getSemesters().then(semesters => this.semesters = semesters);
  }

  ngOnInit(): void {
    this.getSemesters();
  }
}

HTML 片段:

 <ul>
   <li *ngFor="let semester of semesters">
     <span>{{semester.semester}}</span>
   </li>
 </ul>

最后但同样重要的是 app.module.ts 文件:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    UtilModule,
    AppRoutingModule,
    LoginModule,
    StartModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService)
  ],
  providers: [ BackendMockupService],
  bootstrap: [AppComponent]
})

亲切的问候，

感谢所有帮助。

Answer 1

在后端模型服务中返回 null。应删除 return null 并返回第一条语句。

 getSemesters(): Promise<Semester[]> {
    return this.http.get(this.semestersUrl)
      .toPromise()
      .then(response => response.json().data as Semester[])
      .catch(this.handleError);
 }