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

我的后端-mockup.service：

@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

在backend-mockup服务中返回null。应该删除return null并返回第一个语句。

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

无法从角度InMemoryDbService中获取任何内容

1 个答案: