Glenn Sampson Glenn Sampson - 2 months ago 51
reST (reStructuredText) Question

Angular2 SPA (REST API) basic get (CRUD)

Good Morning,

I have my back-end working beautifully but just can’t finish off the front!

I'm confident in my ability to config the back however when I load my desired page I just can’t display my data.

Would someone please advise or direct to a tutorial?

This is what I'm currently using to assist: Angular-2-crud

Thanks 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

I think the problem might be in your templateUrl. You need to prefix the partial view with ./ regardless of whether you use moduleId. You need to specify templateUrl: "./cashmovement-list.component.html"

However, if you are getting any error in the dve console of your browser you should post it as an uplate to your question.