Angular2 SPA（REST API）基本GET（CRUD）

Question

早安，

我有我的後端工作精美，但只是不能完成關閉前！

我對我配置背部的能力充滿信心，但是當我加載我想要的頁面時，我無法顯示我的數據。

有人請指教或指導教程？

這是我目前使用，以幫助什麼：Angular-2-crud

感謝GWS

cashmovement-list.component.ts

import { Component, OnInit, ViewChild, Input, Output, trigger, state, style, animate, transition } from '@angular/core'; 

import { ModalDirective } from 'ng2-bootstrap'; 

import { DataService } from '../shared/services/data.service'; 
import { DateFormatPipe } from '../shared/pipes/date-format.pipe'; 
import { ItemsService } from '../shared/utils/items.service'; 
import { NotificationService } from '../shared/utils/notification.service'; 
import { ConfigService } from '../shared/utils/config.service'; 
import { ICashMovement, Pagination, PaginatedResult } from '../shared/interfaces'; 

@Component({ 
moduleId: module.id, 
selector: 'cashmovements', 
templateUrl: 'cashmovement-list.component.html' 
}) 

export class CashMovementListComponent implements OnInit { 
    public cashmovements: ICashMovement[]; 

constructor(private dataService: DataService, 
    private itemsService: ItemsService, 
    private notificationService: NotificationService) { } 


ngOnInit() { 
    this.dataService.getCashMovements() 
     .subscribe((cashmovements: ICashMovement[]) => { 
      this.cashmovements = cashmovements; 
     }, 
     error => { 
      this.notificationService.printErrorMessage('Failed to load users. ' + error); 
     }); 
} 

} 

cashmovement，list.component.html

<button class="btn btn-primary" type="button" *ngIf="cashmovements"> 
 
    <i class="fa fa-calendar" aria-hidden="true"></i> CashMovements 
 
    <span class="badge">{{totalItems}}</span> 
 
</button> 
 
    
 
<hr/> 
 
    
 
<div [@flyInOut]="'in'"> 
 
    <table class="table table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <th><i class="fa fa-text-width fa-2x" aria-hidden="true"></i>Cash Movement ID</th> 
 
       <th><i class="fa fa-user fa-2x" aria-hidden="true"></i>PortfolioCode</th> 
 
       <th><i class="fa fa-paragraph fa-2x" aria-hidden="true"></i>CCY Out</th> 
 
       <th><i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>Account Out</th> 
 
       <th><i class="fa fa-calendar-o fa-2x" aria-hidden="true"></i>Date</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr *ngFor="let cashmovement of cashmovements"> 
 
       <td> {{cashmovement.CashMovementId}}</td> 
 
       <td>{{cashmovement.PortfolioCode}}</td> 
 
       <td>{{cashmovement.Ccyo}}</td> 
 
       <td>{{cashmovement.AccountO}}</td> 
 
       <td>{{cashmovement.Date | dateFormat | date:'medium'}}</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

個

interfaces.ts

export interface ICashMovement { 
CashMovementId: number; 
PortfolioCode: string; 
Date: Date; 
Ccyo: string;  
AccountO: string; 
ValueO: number; 
Ccyi: string;  
AccountI: string; 
ValueI: number; 
status: string; 
comment: string; 
LastUpdate: number; 
} 

app.module.ts

import './rxjs-operators'; 

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { PaginationModule } from 'ng2-bootstrap/ng2-bootstrap'; 
import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap'; 
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap'; 
import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap'; 
import { ProgressbarModule } from 'ng2-bootstrap/ng2-bootstrap'; 
import { SlimLoadingBarService, SlimLoadingBarComponent } from 'ng2-slim- loading-bar'; 
import { TimepickerModule } from 'ng2-bootstrap/ng2-bootstrap'; 

import { AppComponent } from './app.component'; 
import { DateFormatPipe } from './shared/pipes/date-format.pipe'; 
import { HighlightDirective } from './shared/directives/highlight.directive'; 
import { HomeComponent } from './home/home.component'; 
import { MobileHideDirective } from './shared/directives/mobile-hide.directive'; 

import { CashMovementListComponent } from './cashmovements/cashmovement-list.component'; 

import { routing } from './app.routes'; 


import { DataService } from './shared/services/data.service'; 
import { ConfigService } from './shared/utils/config.service'; 
import { ItemsService } from './shared/utils/items.service'; 
import { MappingService } from './shared/utils/mapping.service'; 
import { NotificationService } from './shared/utils/notification.service'; 

@NgModule({ 
imports: [ 
    BrowserModule, 
    DatepickerModule, 
    FormsModule, 
    HttpModule, 
    Ng2BootstrapModule, 
    ModalModule, 
    ProgressbarModule, 
    PaginationModule, 
    routing, 
    TimepickerModule 
], 
declarations: [ 
    AppComponent, 
    DateFormatPipe, 
    HighlightDirective, 
    HomeComponent, 
    MobileHideDirective, 
    SlimLoadingBarComponent, 
    CashMovementListComponent   
], 
providers: [ 
    ConfigService, 
    DataService, 
    ItemsService, 
    MappingService, 
    NotificationService, 
    SlimLoadingBarService 
], 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 

data.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import {Observer} from 'rxjs/Observer'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

import { ICashMovement, Pagination, PaginatedResult } from '../interfaces'; 
import { ItemsService } from '../utils/items.service'; 
import { ConfigService } from '../utils/config.service'; 

@Injectable() 
export class DataService { 

    _baseUrl: string = ''; 

    constructor(private http: Http, 
     private itemsService: ItemsService, 
     private configService: ConfigService) { 
     this._baseUrl = configService.getApiURI(); 
    } 


    getCashMovements(): Observable<ICashMovement[]> { 
     return this.http.get(this._baseUrl + 'cashmovements') 
      .map((res: Response) => { return res.json();  }) 
      .catch(this.handleError); 
    } 

    private handleError(error: any) { 
     var applicationError = error.headers.get('Application-Error'); 
     var serverError = error.json(); 
     var modelStateErrors: string = ''; 

     if (!serverError.type) { 
      console.log(serverError); 
      for (var key in serverError) { 
       if (serverError[key]) 
        modelStateErrors += serverError[key] + '\n'; 
      } 
     } 

     modelStateErrors = modelStateErrors = '' ? null : modelStateErrors; 

     return Observable.throw(applicationError || modelStateErrors || 'Server error'); 
    } 


} 

Answer 1

我認爲這個問題可能在你的templateUrl。無論您使用moduleId，您都需要在局部視圖前添加./。您需要指定templateUrl: "./cashmovement-list.component.html"

但是，如果您在瀏覽器的dve控制檯中發現任何錯誤，則應將其作爲您的問題的回覆提交。