Je ne peux rien obtenir d'angulaire InMemoryDbService

Question

J'ai donc terminé le didacticiel Angular 4 Heroes et je pensais que j'étais prêt à partir. J'ai donc créé mon propre projet et je voulais essayer quelques trucs pour moi-même. Ce qui malheureusement a échoué. Ce que je veux faire: Je veux utiliser une base de données en mémoire pour récupérer mes données. Dans ma base de données en mémoire, je stocke un tableau de Semesters que je veux retourner quand il s'agit d'un tableau de semestres lorsque mes getSemesters() sont appelés en utilisant ce point de terminaison: api/semesters. Ensuite, je veux afficher les données dans une liste. Malheureusement, la liste n'apparaît pas (ou se charge en quelque sorte).

J'ai essayé de rechercher ce problème en lisant certains documents et la documentation: https://github.com/angular/in-memory-web-api La documentation décrit que la base de données en mémoire suppose qu'il y a un ID. Mon objet semestre n'utilisera pas de champ ID pour des raisons. Donc, je me demandais de cela pourrait être mon problème. Dans ce cas, je vais simplement sauter en utilisant la base de données en mémoire.

Quelqu'un at-il eu des conseils/améliorations/explications sur mon problème?

Voici donc la dataservice de inmemory (je coupe les autres lignes pour le rendre plus petit):

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

Ma classe de semestre:

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

Ma classe de module:

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

Mon backend-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); 
    } 
} 

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

le fragment HTML:

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

et last but not least le fichier app.module.ts:

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

Cordialement,

A Toute aide est appréciée.

Answer 1

Dans le service backend-mockup, null est renvoyé. la valeur null de retour doit être supprimée et la première déclaration doit être renvoyée.

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