I would like to add in an array of objects, but it does not work: Can not set property '0' of undefined
I try to put in this.positions [0] = the PositionMap object
I have decreased the size of the code for better readability, but the rest works
Here is my code:
import { Component, ViewChild, ElementRef } from '#angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { Geolocation } from 'ionic-native';
declare var google;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
positions: PositionMap[] = [];
#ViewChild('map') mapElement: ElementRef;
constructor(public navCtrl: NavController) {
this.positions = [];
}
ionViewDidLoad(){
this.loadMap();
this.autocomplete();
}
autocomplete() {
autocompleteDepart.addListener('place_changed', function() {
var place = autocompleteDepart.getPlace();
let tmpPosition = new PositionMap(place.geometry.location.lat(), place.geometry.location.lng());
this.positions[0] = (tmpPosition);
return;
});
}
}
export class PositionMap {
latitude: number;
longitude: number;
constructor(_latitude: number, _longitude: number) {
this.latitude = _latitude;
this.longitude = _longitude;
}
}
My table is well declared in the class and in the constructor, but yet is not known in the function.
You're using this from a callback function. This callback function must first be bound to this. The easiest way is to use an arrow function:
autocompleteDepart.addListener('place_changed', () => {
...
});
Related
Have an observable being returned from my service.ts as shown here:
import { Injectable, ErrorHandler } from '#angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from
'#angular/common/http'
import { Observable } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { PokeResponse } from '../PokeResponse';
#Injectable({
providedIn: 'root'
})
export class PokeApiService {
private url = "https://pokemon-go1.p.rapidapi.com/pokemon_stats.json";
constructor(private http:HttpClient) { }
getPokeData(): Observable<PokeResponse> {
return this.http.get<PokeResponse>(this.url,
{
headers : new HttpHeaders({
'x-rapidapi-key': 'a6cef4cbcamsh05b29346394d4a4p1bafacjsn2a92406ac103'
})
})
.pipe(
tap(data => console.log('Pokedata/Error' + JSON.stringify(data))
),
catchError(this.handleError)
);
}
private handleError(err:HttpErrorResponse) {
console.log('PokemonService: ' + err.message);
return Observable.throw(err.message);
}
}
This is my response:
export interface PokeResponse{
list:results[];
results:{
pokemon_id:number;
pokemon_name:string;
base_attack:number;
base_defense:number;
base_stamina:number;
}[];
}
export interface results{
pokemon_id:number;
pokemon_name:string;
base_attack:number;
base_defense:number;
base_stamina:number;
}
export class Pokemon implements results{
pokemon_id:number;
pokemon_name:string;
base_attack:number;
base_defense:number;
base_stamina:number;
constructor(_id:number, _name:string, _atk:number, _def:number, _stam:number) {
_id = this.pokemon_id;
_name = this.pokemon_name;
_atk = this.base_attack;
_def = this.base_defense;
_stam = this.base_stamina;
}
}
And this is my component.ts:
import { Component, OnInit } from '#angular/core';
import { PokeApiService } from 'src/app/services/poke-api.service';
import { PokeResponse, results, Pokemon } from 'src/app/PokeResponse';
import { Observable } from 'rxjs';
#Component({
selector: 'app-list-pokemon',
templateUrl: './list-pokemon.component.html',
styleUrls: ['./list-pokemon.component.css']
})
export class ListPokemonComponent implements OnInit {
constructor(private pokeService: PokeApiService) { }
ngOnInit(): void {
this.getPokeDetails();
}
pokeData:PokeResponse;
errorMessage:any;
pokeArray:results;
getPokeDetails() : boolean {
this.pokeService.getPokeData().subscribe(
pokeData => {
this.pokeData=pokeData;
console.table(pokeData);
},
error => this.errorMessage = <any>error
);
return false;
}
}
In my console I'm getting back a console.table of my observable like this
I'm trying to filter out the names of Pokemon which are the same as others, which could also be achieved by just filtering out any of the pokemon_ids as all the stats match regardless of the type.
So far I've tried:
console.log(this.pokeArray);,
using [...Set()], forEach(), and Array.from()
Any help or suggestions on how I can make this question any clearer would be greatly appreciated.
Try this, using filter:
// list-pokemon.component.ts
export class ListPokemonComponent implements OnInit {
uniqueListPoke = [];
flags = {};
constructor(private pokeService: PokeApiService) { }
ngOnInit(): void {
this.getPokeDetails();
}
pokeData:PokeResponse;
errorMessage:any;
pokeArray:results;
getPokeDetails() : boolean {
this.pokeService.getPokeData().subscribe(
pokeData => {
this.uniqueListPoke = pokeData.filter((entry) => {
if (this.flags[entry.pokemon_name]) {
// console.log('flags', false);
return false;
}
this.flags[entry.pokemon_name] = true;
return true;
});
console.log(JSON.stringify(this.uniqueListPoke));
},
error => this.errorMessage = <any>error
);
return false;
}
}
The working example:
https://stackblitz.com/edit/angular-distinct-poke?file=src/app/hello.component.ts
if I add an object to the objectListDrawArea array outside of the original class, it will be added, but my * ngFor cannot find the object. I have absolutely no idea how to solve it, should I use Observable, if so can you leave an example in the comments? Thank you
ao-bar.component.ts
import { AoBarService } from './ao-bar.service';
import { DrawAreaComponent } from '../../../draw-area/draw-area/draw-area.component';
#Component({
selector: 'app-ao-bar',
templateUrl: './ao-bar.component.html',
styleUrls: ['./ao-bar.component.sass']
})
export class AoBarComponent implements OnInit {
objectsList: object[] = new Array();
showObjectsList: boolean;
drawAreaComponent: DrawAreaComponent = new DrawAreaComponent();
constructor(private service: AoBarService) {
this.service.getObject(this.objectsList);
}
ngOnInit() {
console.log(this.objectsList, ' AoBarComponent');
}
private onShowObjectsList() {
this.showObjectsList = !this.showObjectsList;
}
public onDragEnd(event: DragEvent): void {
console.log('drag end', event);
if (this.drawAreaComponent.onDragEnter) {
for (let object of this.objectsList) {
if (object.name == event.path[0].nextElementSibling.innerText) {
object.settings.x = event.x;
object.settings.y = event.y;
this.drawAreaComponent.createObject(object);
}
}
}
}
}
draw-area.component.ts:
import { Component, OnInit } from '#angular/core';
import { CdkDragEnd } from '#angular/cdk/drag-drop';
#Component({
selector: 'app-draw-area',
templateUrl: './draw-area.component.html',
styleUrls: ['./draw-area.component.sass']
})
export class DrawAreaComponent implements OnInit {
objectsList: object[] = new Array();
constructor() {
}
ngOnInit() {
}
public onDragEnter(event: DragEvent): boolean {
console.log('drag enter', event);
return true;
}
public onDragEnd(event: CdkDragEnd): void {
console.log(event);
}
public createObject(objectToCreate: object): void {
this.objectsList.push(objectToCreate);
console.log(`Aktuelle Liste: ${this.objectsList}`);
}
}
draw-area.component.html :
<div id="DrawAreaComponent">
<div
class="example-boundary"
(dragenter)="onDragEnter($event)"
>
<div
id="ContainerObject"
*ngFor="let object of objectsList | async"
cdkDragBoundary=".example-boundary"
cdkDrag
(cdkDragEnded)="onDragEnd($event)"
>
<img id="ImgObject" [src]="object.imgUrl">
</div>
</div>
</div>
this is a change detection issue.
instead of this.objectsList.push(objectToCreate);
use this.objectsList = [...this.objectsList, objectToCreate]; it will work.
read about change detection.
I have a Observable.timer function that creates a countdown and I want to call a specific function called endTimer() when the timer has ended inside my #Component without using setTimeout(). I can check the value of counter == 0 in the view but how do I check in the #Component
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { Storage } from '#ionic/storage';
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/timer'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/take'
//imported pipes
import {FormatTimer} from '../../pipes/formattimer';
#Component({
selector: 'page-livegame',
templateUrl: 'livegame.html',
pipes: [FormatTimer]
})
export class LivegamePage {
gamesData: any;
countDown: any;
counter = 1*60;
tick = 1000;
constructor(public modalCtrl: ModalController, public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {
//setTimeout(function(){ endTimer(); }, 300000);
}
ionViewDidLoad() {
this.getCurrentGame();
}
ngOnInit() {
this.countDown = Observable.timer(0, this.tick)
.take(this.counter)
.map(() => --this.counter);
}
endTimer() {
console.log('ended');
}
}
<div *ngIf="counter == 0">the timer has ended </div>
Are you subscribing to it somewhere? on the template with 'async' pipe or so? If not, you have to subscribe to it. For the same reason, the variable 'this.counter' will never reach 0.
If you are already subscribing to it on the template with async Pipe, you can use the operator finally:
ngOnInit() {
this.countDown = Observable.timer(0, this.tick)
.take(this.counter)
.map(() => --this.counter)
.finally(() => this.endTimer())
}
if you are not subscribing to it on the template, you can subscribe like this:
ngOnInit() {
this.countDown = Observable.timer(0, this.tick)
.take(this.counter)
.map(() => --this.counter)
.finally(() => this.endTimer())
.share() // Avoid multiple side effect if multiple subscribers
this.countDown.subscribe(() => { /* do nothing */})
}
Hope this helps.
This is the first component where i am pushing those things into array named items and i am trying to get it in the second component through service
import { Component } from '#angular/core';
import { FormBuilder, FormControl } from '#angular/forms';
import {AppService} from '../second/app.service';
import { Router } from '#angular/router';
import { Http,Response } from '#angular/http';
import { routing, appRoutingProviders } from '../app.route';
import { Validators } from '#angular/forms';
import {BrowserModule} from '#angular/platform-browser';
#Component({
selector: 'first-app',
templateUrl:"../app/src/component/first/app.firstpage.html"
})
export class FirstComponent
{
data:any;
public items=[];
public edited=false;
public city=false;
public dateCon=false;
inputForm: FormGroup;
Select: FormControl;
Selectt: FormControl;
dat:FormControl;
constructor(private appservice:AppService,builder: FormBuilder, router:Router)
{
this.appservice.getData().subscribe(res=>{this.data=res.json()});
console.log(this.data);
this.Select = new FormControl('', [
Validators.required
]);
this.Selectt = new FormControl('', [
Validators.required
]);
this.dat = new FormControl('', [
Validators.required
]);
this.inputForm = builder.group({
Select: this.Select,
Selectt: this.Selectt,
dat: this.dat
});
this.router=router;
this.appservice=appservice;
}
ngOnInit(){
this.appservice.getData()
}
onclick(a,b) {
console.log(this.data);
let sel1=this.inputForm.value.Select;
let sel2=this.inputForm.value.Selectt;
let sel3=this.inputForm.value.dat;
console.log(sel3);
console.log(sel1);
console.log(sel2);
console.log(this.data.bus.length);
for(let i=0;i<this.data.bus.length;i++){
if((this.data.bus[i].from==sel1)&&(this.data.bus[i].to==sel2))
{
this.items.push(this.data.bus[i]);
}
}
this.appservice.setData(this.items);
}
if((sel1!="")&&(sel2!="")&&(sel3!="")&&(sel1!=sel2))
{
this.router.navigate(['/sec-component']);
}
else if((sel1=="")&&(sel2=="")&&(sel3==""))
{
this.edited=true;
}
if((sel1==sel2)&&((sel1!="")&&(sel2!="")))
{
this.edited=false;
this.city=true;
}
else
{
this.city=false;
}
if(sel1!=sel2)
{
this.edited=false;
}
if(sel3=="")
{
this.dateCon=true;
}
else
{
this.dateCon=false;
}
}
}
This is the second component to which i am passing this array and i need to get that printed over there and each properties to be accessed rather than the entire stuff.
import { Component } from '#angular/core';
import {AppService} from '../first/first.service';
#Component({
template:
`
<h1>second component</h1>
<h1>second component</h1>
<p >{{myName}}</p>
`
})
export class SecondComponent {
constructor(private appservice: AppService)
{
this.appservice=appservice;
this.myName=appservice.getVal();
}
}
This is the service page where i am returning the values
import {Component, Injectable,Input,Output,EventEmitter} from '#angular/core'
import { Http, Response } from '#angular/http';
export interface myData
{
name:any;
}
#Injectable()
export class AppService
{
sharingData: myData={name:""};
constructor(private http:Http){ }
getData()
{
return this.http.get('./app/src/component/busDet.json')
}
setData(i)
{
console.log('save data function called' + i + this.sharingData.name);
this.sharingData.name=i;
console.log(this.sharingData.name);
}
getVal()
{
console.log(this.sharingData.name);
return this.sharingData.name;
}
}
I am getting the output as object.object
I am not able to get the values with in the JSON in the next component.
I need to modify my code where loading detail category will first look whether it is not already loaded in the statement, and if not then detail loads. Thanks for help!
Constructor of CategoryProvider:
private _obServers = {
'categoryList': undefined,
'category': undefined,
'idCategory': new Subject<Number>()
};
constructor(){
this.categories = new Observable(observer => this._obServers.categoryList = observer).share();
this._categoryObservable = this.categories
.combineLatest(this._obServers.idCategory, (categories, idCategory) => {
return categories.filter(category => category.id === idCategory)[0];
})
.distinctUntilChanged((oldCategory, newCategory) => {
return oldCategory.id === newCategory.id;
});
}
CategoryList:
loadCategories(search?:string):void{
this._http
.get('/services/category/list?search=' + search)
.map(res => res.json())
.subscribe(data => {
this._obServers.categoryList.next(this.createCategoryEntities(data));
});
}
CategoryDetail:
loadCategory(categoryId:number){
this._obServers.idCategory.next(categoryId);
//If category not loaded I need to load it
}
I have followed this way https://github.com/JonatanSCS/Angular-2-Tutorial/blob/master/node_modules/rxjs/src/add/observable/combineLatest.ts
import { Component, Injectable, Inject, provide } from '#angular/core';
import { HTTP_PROVIDERS } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import { combineLatestStatic } from 'rxjs/operator/combineLatest.js';
import { MessageApi } from '../providers/lb-service/lb-services.provider'
import { EstimatesService } from './estimates.service';
#Component({
pipes: [TranslatePipe],
})
#Injectable()
export class InvoiceService {
constructor(private _message:MessageApi,
#Inject(EstimatesService) _estimates:EstimatesService) {
this._message = _message;
this._estimates = _estimates;
Observable.combineLatest = combineLatestStatic;
declare module 'rxjs/Observable' {
namespace Observable {
export let combineLatest: typeof combineLatestStatic;
}
}
Observable.combineLatest(
this._estimates.getEstimates(),
this._message.findOne({
where: {
moduleTag: 'monthlyStat',
'dynamic.date': "2016-07-01" //new Date
},
fields: {
dynamic: true
}
}),this._message.findOne({
where: {
moduleTag: 'areaPriceSE1',
'dynamic.date': ''
},
fields: {
dynamic: true
}
})
).subscribe(res => console.log("observable", res));