Angular 2 is fairly new. I have been using firebase-angular2 to create a service.
I ran the firebase-angular2 demo here https://github.com/KallynGowdy/firebase-angular2-demo but when I have been running it I get the following error
EXCEPTION: TypeError: heroes.map is not a function
angular2.dev.js:23083 EXCEPTION: TypeError: heroes.map is not a function
As far as I can tell it is referring to this section of code at ts/firebase-heros.service.ts
import {Injectable} from "../../node_modules/angular2/core";
import {HeroService} from "./hero.service";
import {Observable} from "../../node_modules/rxjs/Rx";
import {FirebaseService} from '../../node_modules/firebase-angular2/core';
import {Hero} from "./../interfaces/hero";
#Injectable()
export class FirebaseHeroService extends HeroService {
private service:FirebaseService;
constructor(firebaseService:FirebaseService) {
this.service = firebaseService.child('heroes');
}
getHeroes() {
var service = this.service;
return service.value.map((heroes) => {
return heroes.map((h, i) => {
// TODO: Cleanup
return {
id: h.id,
name: h.name,
save: function () {
return service.child(i.toString()).setData({
id: this.id,
name: this.name
});
}
}
})
});
}
}
Any ideas of what may be causing this problem?
thanks in advance
heroes is not array at this line, that's why you're getting an error:
return service.value.map((heroes) => {
console.log(heroes);
...
If you log it's value you can check what type it is and take appropriate action. If it's a response, you might need to convert it to JSON before processing it further
return service.value
.map(response => response.json())
.map((heroes) => {...
Related
i have a little worry, if some can just help me, i use a laravel 5.8 api, which i create, when i retrieve the parameter data mtr from posteman its walk, but when i do the same thing with this url << url = 'http://127.0.0.1:8000/api/studentbyid/45' >> it works its problem because the 45 is the mtr, whereas according to the logic that I try to put in place and that it is the user who will introduce the mtr, then display...
import { Component, OnInit } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Candidate } from '../models/candidate';
#Component({
selector: 'app-candidate',
templateUrl: './candidate.page.html',
styleUrls: ['./candidate.page.scss'],
})
export class CandidatePage implements OnInit {
mtr: '45';
// tslint:disable-next-line: new-parens
data: any;
url = 'http://127.0.0.1:8000/api/studentbyid/';
constructor( private httpClient: HttpClient) { }
ionViewWillEnter(mtr: string) {
return this.httpClient.get(this.url + '/' + this.mtr)
.subscribe(
data => {
this.data = JSON.stringify(data);
console.log(this.data);
},
error => {
console.log(error);
});
}
ngOnInit() {}
getbyID( mtr: string) {}
}
here is the result in the console when I place it directly
enter image description here
and that's when I try to retrieve the word from a userenter image description here
if there are some who can just help me, and I notice that there is no answer in the form of object
Your variable mtr is indeed undefined.
mtr: '45';
console.log(mtr);
// undefined
You need to set the variable to the '45' string instead you typed the mtrvariable as type '45'.
mtr: string = '45';
console.log(mtr);
// '45'
I have to tell you I'm getting crazy with it. I'm trying to get data from Firebase with AngularFire2(v.5) then work with it on #ngrx/effects and store it on #ngrx/store. Well, as I need the data with the keys, my code of effects looks like this:
spaces.effects.ts
#Effect()
getSpaces$ = this.actions$.ofType(SpacesActions.GET_SPACES_REQUEST)
.switchMap((action: SpacesActions.GetSpacesRequest) => {
return this.afs.list<Space>('/spaces').snapshotChanges()
.switchMap(actions => {
console.log('action is ', actions);
return actions.map(space => {
const $key = space.payload.key;
const data: Space = { $key, ...space.payload.val() };
console.log('snapshot is: ', data);
return new SpacesActions.GetSpacesSuccess(data);
});
}
);
My "actions" comes with the data and the key, then I get the key for each item because then I could update and delete items easily. My database has 3 items with 3 keys. If I run this code and log it, first I can see all items in 1 array with their payloads and with the second log I see each payload as snapshot.
When I call GetSpacesSuccess, I'd like to send all snapshots I got (with key and item) then store it. The way I'm doing now dispatch this action 3 times and I can see only 2 items on the screen because the first one is overridden by the second one.
So, two questions: Is there any easier way to get the items from firebase with their keys then store them with #ngrx? If not, what am I doing wrong that my first item is being overridden and my action is being dispatched 3 times?
Please, I'm doing my best with it as I'm learning. Thank you!
spaces.reducers.ts
case SpacesActions.GET_SPACES_REQUEST:
return {
state,
spaces: null,
loading: true
};
case SpacesActions.GET_SPACES_SUCCESS:
return {
...state,
...action.payload,
spaces: [state, action.payload],
loading: false
};
spaces.actions.ts
export class GetSpacesRequest implements Action {
readonly type = GET_SPACES_REQUEST;
}
export class GetSpacesSuccess implements Action {
readonly type = GET_SPACES_SUCCESS;
constructor(public payload: Space) {} <<<<<HERE I'D LIKE TO GET THE FULL ARRAY WITH EACH KEY
}
Thanks #AndreaM16 for the most complete answer. I went through the night working on it and I ended up doing it different. Actually, in the learning process we make mistakes in order to get the knowledge. Probably your solution is better than mine and I'll study that, thanks. Please, if possible, I'd love to hear your comments about my solution.
Finally, after reading lots of documentation, my effects is now this one, I don't have any error catcher though:
private spacesList = 'spaces/';
#Effect()
getSpaces$ = this.actions$.ofType(SpacesActions.GET_SPACES_REQUEST)
.switchMap(payload => this.afs.list(this.spacesList).snapshotChanges()
.map(spaces => {
return spaces.map(
res => {
const $key = res.payload.key;
const space: Space = {$key, ...res.payload.val()};
return space;
}
);
})
.map(res =>
new SpacesActions.GetSpacesSuccess(res)
));
Reducer
case SpacesActions.GET_SPACES_REQUEST:
return Object.assign({}, state, {
spaces: null,
loading: true
});
case SpacesActions.GET_SPACES_SUCCESS:
return Object.assign({}, state, {
spaces: action.payload,
loading: false
});
Actions
export class GetSpacesRequest implements Action {
readonly type = GET_SPACES_REQUEST;
}
export class GetSpacesSuccess implements Action {
readonly type = GET_SPACES_SUCCESS;
constructor(public payload: Space[]) {}
}
And, in my component, where I need the list:
constructor(private store: Store<fromSpaces.FeatureState>) {}
ngOnInit() {
this.store.dispatch(new SpacesActions.GetSpacesRequest());
this.spacesState = this.store.select('spaces');
}
If I understood your question correctly, you would like to store for each Item also store its key. You are looking for Map.
I would structure your feature as follows.
spaces.actions.ts:
Loading spaces requires no payload, while success has only an array of Space. I think you should build your Map<string,Space> in your reducer (string is your key).
import { Action } from '#ngrx/store';
/** App Models **/
import { Space } from './space.model';
export const GET_SPACES = '[Spaces] Spaces get';
export const GET_SPACES_SUCCESS = '[Start] Spaces get - Success';
export class GetSpacesAction implements Action {
readonly type = GET_SPACES;
}
export class GetSpacesActionSuccess implements Action {
readonly type = GET_SPACES_SUCCESS;
constructor(public payload: Space[]) {}
}
export type All
= GetSpacesAction
| GetSpacesActionSuccess;
spaces.effects.ts:
I'm assuming you just need a method to fetch spaces. If you need to do other stuff, just edit this piece of code. spaceService.getSpaces() is supposed to return only an array of Spaces. So, create a new Space model and, on your service, map each json entry to a new Space().
import { Injectable } from '#angular/core';
import { Actions, Effect } from '#ngrx/effects';
/** rxjs **/
import {map} from 'rxjs/operators/map';
import {mergeMap} from 'rxjs/operators/mergeMap';
import {catchError} from 'rxjs/operators/catchError';
/** ngrx **/
import * as spacesActions from './spaces.actions';
/** App Services **/
import { SpacesService } from './spaces.service';
#Injectable()
export class SpacesEffects {
#Effect() getSpaces$ = this.actions$
.ofType(spaceActions.GET_SPACES)
.pipe(
mergeMap(() => {
return this.spaceService.getSpaces()
.pipe(
map((spaces) => {
return new spacesActions.GetSpacesActionSuccess(spaces);
}),
catchError((error: Error) => {
// Handle erro here
})
);
})
)
;
constructor(private spacesService: SpacesService, private actions$: Actions) { }
}
spaces.reducer.ts
Here you build your map and you can also create a new action to return, for instance, a space given its key. I dont think you need any loading parameter here, I guess you are using it for some loading handling in your views, just use AsyncPipe in your view and handle a loading animation with an *ngIf checking if there are spaces or not.
/** ngrx **/
import {createFeatureSelector} from '#ngrx/store';
import {createSelector} from '#ngrx/store';
import * as spacesActions from './spaces.actions';
export type Action = spacesActions.All;
/** App Models **/
import { Space } from './space.model';
export interface SpaceState {
keySpaces: Map<string, Space>;
spaces: Space[];
keys: string[];
}
export const initialState: SpaceState = {
keySpaces: new Map<string, Space>(),
spaces: [],
keys: []
};
// Selectors
export const selectSpace = createFeatureSelector<SpaceState>('space');
export const getKeySpaces = createSelector(selectSpace, (state: StartState) => {
return state.keySpaces;
});
export const getSpaces = createSelector(selectSpace, (state: SpaceState) => {
return state.spaces;
});
export const getKeys = createSelector(selectSpace, (state: SpaceState) => {
return state.keys;
});
export function spacesReducer(state: SpaceState = initialState, action: Action): SpaceState {
switch (action.type) {
case startActions.GET_SPACES_SUCCESS:
// Since we return this from effect
const fetchedSpaces = action.payload;
const fetchedKeys = [];
const keySpacesMap = new Map<string, Space>();
fetchedSpaces.forEach( (space: Space) => {
fetchedkeys = fetchedKeys.concat(space.key);
keySpacesMap.set(space.key, new Space(space));
}
returns {
...state,
keySpaces: keySpacesMap,
spaces: fetchedSpaces,
keys: fetchedkeys
}
default: {
return state;
}
}
}
And, finally, you should be able to get such parameters in your components like:
. . .
keySpaces$ = Observable<Map<string, Space>>;
spaces$ = Observable<Array<Space>>;
keys$ = Observable<Array<string>>;
constructor(private _store: Store<AppState>) {
this.keySpaces$ = this._store.select(getKeySpaces);
this.space$s = this._store.select(getSpaces);
this.keys$ = this._store.select(getKeys);
}
. . .
ngOnInit() {
this._store.dispatch(new spacesActions.GetSpacesAction);
}
. . .
Of course add the new state to AppState:
. . .
export interface AppState {
. . .
space: SpaceState;
}
I'm attempting to create a Wordpress theme compatible with 4.8.x that will render single posts and list of posts as per [this tutorial]:1
When I run the test script, I receive the following errors:
ERROR in C:/MyTheme/src/app/posts/post-list/post-list.component.spec.ts
(9,25): Expected 2 arguments, but got 0.
ERROR in C:/MyTheme/src/app/posts/post-single/post-single.component.spec.ts
(8,25): Expected 2 arguments, but got 0.
The code for both components is very similar and calls into the PostsService which is defined as:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Post } from './post';
import { environment} from '../../environments/environment';
import {Observable} from 'rxjs/Observable';
#Injectable()
export class PostsService {
private _wpBase = environment.wpBase;
constructor(private http: HttpClient) { }
getPosts():Observable<Post[]> {
return this.http.get<Post[]>(this._wpBase + 'posts');
}
getPost(slug: string): Observable<Post[]> {
return this.http.get<Post[]>(this._wpBase + 'posts?slug=${slug}');
}
}
My post-list-component includes the following:
import { Component, OnInit } from '#angular/core';
import { Post } from '../post';
import { PostsService} from '../posts.service';
import { HttpErrorResponse } from '#angular/common/http';
import {Router} from '#angular/router';
#Component({
selector: 'app-post-list',
templateUrl: './post-list.component.html',
styleUrls: ['./post-list.component.css'],
providers: [PostsService]
})
export class PostListComponent implements OnInit {
posts: Post[];
constructor( private postsService: PostsService, private router: Router ){}
ngOnInit() {
this.postsService.getPosts().subscribe(
(posts: Post[]) => this.posts = posts,
(err: HttpErrorResponse) => err.error instanceof Error ?
console.log('An error has occurred:',
err.error.message):console.log('Backend returned code $(err.status),
body was: ${err.error}'));
}
selectPost(slug) {
this.router.navigate([slug]);
}
}
The error is thrown in the following post.list.component.spec.ts:
/* tslint:disable:no-unused-variable */
import { TestBed, async } from '#angular/core/testing';
import { PostListComponent } from './post-list.component';
import {Router} from "#angular/router";
describe('Component: PostList', () => {
it('should create an instance', () => {
let component = new PostListComponent();
expect(component).toBeTruthy();
});
});
I am not sure how to resolve the errors. It seems to me that PostLisComponent() needs to be passed 2 arguments as per the error, but it's not clear what arguments should be passed. Can anyone assist me in better understanding how to resolve the errors?
its because the constructor use TestBed
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { PostListComponent } from './post-list.component';
describe('PostListComponent ', () => {
let component: PostListComponent ;
let fixture: ComponentFixture<PostListComponent >;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PostListComponent ]
})
.compileComponents();}));
beforeEach(() => {
fixture = TestBed.createComponent(PostListComponent );
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create an instance', () => {
expect(component).toBeTruthy();
});
});
From Angular's Testing Guide in regards to the TestBed, and why it would fit such a scenario:
TestBed is the first and most important of the Angular testing
utilities ... In effect, you detach the tested component from its own
application module and re-attach it to a dynamically-constructed
Angular test module tailored specifically for this battery of tests.
Right now, you're statically constructing instead of dynamically constructing using the TestBed, which is causing the error since the constructor of the PostListComponent contains two parameters which would be required to be filled in case of static constructing.
I am currently building an Angular2 application accessing an MVC web API i have built. However, it does not seem to retrieve any data. I am obviously missing something but i am not sure what.
I know that the URL i am using works along with the headers as i am able to retrieve the data correctly through fiddler.
My repack.service.ts is as follows:
import { Injectable } from '#angular/core';
import { Headers, Http } from '#angular/http';
import 'rxjs/add/operator/toPromise';
import { RepackIndex } from './RepackIndex';
#Injectable()
export class RepackService{
private baseUrl = 'https://localhost:44321/api/Repack/All';
private headers = new Headers({'Content-Type': 'application/json'});
constructor(private http: Http) { }
getAllRepacks(): Promise<RepackIndex[]>{
var data = this.http.get(this.baseUrl)
.toPromise()
.then(response => response.json().data as RepackIndex[])
.catch(this.handleError);
return data;
}
private handleError(error: any): Promise<any>{
console.error("An error occured in repack.service", error);
return Promise.reject(error.message || error);
}
}
And this is my component:
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { RepackIndex } from './repackIndex';
import { RepackService } from './repack.service';
#Component({
selector: 'index',
templateUrl: 'app/index.component.html',
providers: [RepackService]
})
export class IndexComponent implements OnInit{
repacks: RepackIndex[];
selectedRepack: RepackIndex;
constructor(private router: Router, private repackService: RepackService) { }
onSelect(repack: RepackIndex): void{
this.selectedRepack = repack;
}
getRepacks(): void{
this.repackService.getAllRepacks().then(repacks => this.repacks = repacks);
}
ngOnInit(): void{
this.getRepacks();
}
}
I have tried putting in a breakpoint and adding a console.log line but no data is returned to the component.
I am fairly new to Angular2 so any help would be greatly appreciated.
Thanks,
Right I have managed to get it to work by using an observable rather than a promise.
My service method now looks like this:
public GetAll = (): Observable<RepackIndex[]> => {
return this.http.get(this.baseUrl)
.map((response: Response) => <RepackIndex[]>response.json())
.catch(this.handleError);
}
And my Component call now looks like this:
getRepacks(): void{
this.repackService.GetAll()
.subscribe((data:RepackIndex[]) => this.repacks = data,
error => console.log(error),
() => console.log('Get All repacks complete'));
}
I found the answer here
Hope this helps someone else
I'm starting with angular2. And I try to get data from an php script.
I followed the turorial at the angular docs. But I recently get this confusing error messeage:
zone.js:463 ViewWrappedException {_wrapperMessage: "Error in app/components/catch-data/catch-data.component.html:7:5", _originalException: TypeError: Cannot read property 'name' of undefined
at DebugAppView._View_CatchDataComponent0.de…, _originalStack: "TypeError: Cannot read property 'name' of undefine…t/node_modules/#angular/core/core.umd.js:9996:18)", _context: DebugContext, _wrapperStack: "Error: Error in app/components/catch-data/catch-da…tChangesInternal (AppComponent.template.js:121:8)"}
containing this message:
TypeError: Cannot read property 'name' of undefined
at DebugAppView._View_CatchDataComponent0.detectChangesInternal (CatchDataComponent.template.js:62)
at DebugAppView.AppView.detectChanges (core.umd.js:9996)
at DebugAppView.detectChanges (core.umd.js:10084)
at DebugAppView.AppView.detectViewChildrenChanges (core.umd.js:10016)
at DebugAppView._View_CatchDataComponent_Host0.detectChangesInternal (CatchDataComponent_Host.template.js:36)
at DebugAppView.AppView.detectChanges (core.umd.js:9996)
at DebugAppView.detectChanges (core.umd.js:10084)
at DebugAppView.AppView.detectContentChildrenChanges (core.umd.js:10011)
at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:121)
at DebugAppView.AppView.detectChanges (core.umd.js:9996)
I have no idea where this error comes from. Here is my code:
model.service.ts
import { Injectable } from '#angular/core';
import { Http, Headers } from '#angular/http';
import { Model } from '../../class/model/model';
#Injectable()
export class ModelService
{
constructor(private http: Http){}
private modelUrl = '../../server/clientFunc/getModel.php';
getModel (): Promise<Model> {
return this.http.get(this.modelUrl).toPromise().then(response => response.json()).catch(this.handleError);
}
private handleError(error: any) {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}
catch-data.component.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router-deprecated';
import {Model} from '../../class/model/model';
import {ModelService} from '../../services/model/model.service';
#Component({
selector: 'catch-data',
templateUrl: 'app/components/catch-data/catch-data.component.html',
providers: [ModelService]
})
export class CatchDataComponent implements OnInit
{
constructor(private modelService:ModelService) {
}
model:Model;
errorMessage:string;
testItem = "Test-Item";
ngOnInit():any {
this.getModel();
}
getModel() {
this.modelService.getModel()
.then(response => {
this.model = new Model();
this.model.deserialize(response);
})
.catch(error => {
this.errorMessage = error;
console.log(error);
}); // TODO: Display
}
}
and the model.ts
export class Model
{
id:number;
name:string;
constructor(){
}
deserialize(object){
this.name = object.name;
this.id = object.id;
}
}
The template looks like:
<h1>Search and catch data</h1>
<h3>Model: {{testItem}}</h3>
<div>Name: {{model.name}}</div>
So as I could detect the CatchDataComponent gets null as I call getModel().
So in ngOnInit this is not null but a call later in getModel() this is null.
I have no Idea why this happens.
I hope you have an idea or any suggestions.
I think that you could use the Elvis operator:
<div>Name: {{model?.name}}</div>
because the model property is loaded asynchronously and not available when the model.name is evaluated at first...