Following is my service where I emits two events dataLoaded and loadingData I want to show and hide GIF image when data is loading and loaded respectively, and in component I catch both events and change the value of Boolean variable. But when page loads first time initially loading GIF is not showing and when data loaded then GIF appeared and if I select filter to search then it works fine and also when I debug the code the value of showLoading updated successfully
Service
import { forwardRef, Injectable, EventEmitter } from '#angular/core';
import { Http, Headers, RequestOptions, Response, URLSearchParams } from '#angular/http';
import 'rxjs/add/operator/toPromise';
#Injectable()
export class SearchService {
loadingData = new EventEmitter();
dataLoaded = new EventEmitter();
pages: any = {};
searchResults = [];
search() {
this.loadingData.emit("ShowLoading")
this.performSearch().then(response => {
this.searchResults = response.json();
this.pages = this.searchResults['pages'];
this.searchResults = this.searchResults['data'];
this.resultsUpdated.emit('SearchResultsUpdated');
this.dataLoaded.emit("HideLoading")
}, error => {
this.dataLoaded.emit("HideLoading")
});
}
}
Component
import { Component, ViewChild, ElementRef } from '#angular/core';
import { SearchService } from '../../search.service';
/*import {Alert} from "../../alert.component";*/
import { NgbModal } from '#ng-bootstrap/ng-bootstrap';
import { SavedSearchComponent } from '../saved-search/saved-search.component';
#Component({
selector: 'property-onion-search-results',
templateUrl: './search-results.component.html'
})
export class SearchResultsComponent {
#ViewChild('searchResultArea') resultsArea: ElementRef;
searchResults: any[] = null;
closeResult: string;
view = 'regular';
resultInformation: any[];
filterString: string = "";
resultCount: number = 0;
numbers: any[] = null;
showLoading;
constructor(private searchService: SearchService, private modalService: NgbModal) {
this.searchService.resultsUpdated.subscribe(data => {
this.searchResults = this.searchService.getResults();
this.filterString = this.searchService.toString();
this.resultCount = this.searchService.pages.total;
var pages = this.searchService.pages.number_of_pages;
if (this.searchService.pages.total > 25) {
this.numbers = new Array(pages).fill(1).map((x, i) => i);
} else {
this.numbers = null;
}
this.resultsArea.nativeElement.click(); // THis is a hack to fix refresh issue of this area. This area doesn't get refreshed unless you click somewhere in the browser.
});
this.searchService.loadingData.subscribe(data => {
console.log("show")
this.showLoading = true
});
this.searchService.dataLoaded.subscribe(data => {
console.log("hide")
this.showLoading = false
});
}
}
html
<img class="loading" *ngIf="showLoading" src="images/loader.gif"/>
For initial loading you should define showLoading directly in your component :
showLoading:boolean = true;
Related
I am trying to get JSON data from server and then output the data in Nativescript Listpicker.I am also using Angular Here is the code.The problem is I cannot see the items displayed in the Listpicker.A service is being used to make an http request to the server. A subscription is used to get the data from the service. I have a play example below.I would like to know what I am doing wrong. Is it the event binding ?
JSON from server
[{'name':potato},{'name':berries}]
.ts file
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from "#angular/core";
import { EventData} from 'tns-core-modules/data/observable';
import { RouterExtensions } from "nativescript-angular/router";
import { BehaviorSubject, Subscription } from "rxjs";
import { request, getFile, getImage, getJSON, getString } from "tns-core-modules/http";
import { Page } from 'ui/page';
import { Output_restaurants_service } from "../services/output_restaurants.service";
#Component({
selector: "item_option",
moduleId: module.id,
templateUrl: "./item_option.component.html",
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ["./item_option.component.css"]
})
export class ItemOption implements OnInit,OnDestroy {
page:Page;
args:EventData;
isLoading: boolean;
value:any;
picked:any;
cool:any;
list =[];
arr = [];
public pokemons: Array<string>;
private curChallengeSub: Subscription;
constructor(private service_men:Output_restaurants_service,page:Page, private router: RouterExtensions){
this.pokemons = [];
}
ngOnInit(){
this.service_men.output_included_sides().subscribe(
(r)=>{
for(let x =0;x<r.length;x++){
this.arr.push(r[x]['name']);
}
this.pokemons = this.arr;
console.log("observer"+ this.pokemons);
}
);
}
public selectedIndexChanged(picker) {
console.log('picker selection: ' + picker.selectedIndex);
this.picked = this.pokemons[picker.selectedIndex];
}
public onSelectedIndexChanged(picker) {
}
ngOnDestroy(){
}
}
Service
import { Injectable } from '#angular/core';
import { Http,Response} from '#angular/http';
import { HttpClient } from '#angular/common/http';
import { BehaviorSubject } from 'rxjs';
import { map,tap,take } from "rxjs/operators";
import { Menu_i} from '~/restaurant_menu/restaurant.model';
import { Observable } from 'tns-core-modules/ui/page/page';
//import { Observable } from "rxjs";
#Injectable({providedIn:'root' })
export class Output_restaurants_service{
shopping_cart=[];
included_side_output:any;
menu_part:any;
menu_rest_items:any;
values:any
servers=[];
men:any;
menu_int= [];
outpuut_restaurants: any;
//response:string[]=[];
Restaurants:string[]=[];
countries: any[];
//http: any;
response = [];
pokemonsarray= [];
//private menuChanged = new Subject(null);
//public products: Observable<Menu[]>
private _currentChallenge = new BehaviorSubject(null);
constructor(private http:HttpClient) {
}
// sides(){
// return this._currentChallenge.asObservable();
// }
output_included_sides(){
this.included_side_output = this.http.get(`https://www.pidequehaypos.com/customer_chooses_food_type/output_specific_sides`);
return this.included_side_output;
}
add_variable_to_session(main_dish_id:string){
return this.http.post(`https://www.pidequehaypos.com/customer_chooses_food_type/store_main_dish_to_session`,{"main_dish_id":main_dish_id});
}
choose_restaurant() {
return this.http.get(`https://www.pidequehaypos.com/customer_chooses_business/output_businesses_button`);
}
post_menu_part_selected(restaurant_number:string){
this.menu_part= this.http.post(`https://www.pidequehaypos.com/customer_chooses_food_type/output_food_type`,{"business_id":restaurant_number});
return this.menu_part;
}
output_restaurant_items(menu_part_name:string){
this.menu_rest_items = this.http.post(`https://www.pidequehaypos.com/customer_chooses_food_type/output_food_and_drink_items`,{"menu_part_name":menu_part_name});
return this.menu_rest_items;
}
public set_restaurants (Rest){
//console.log("rest res"+Rest);
if(Rest["business"]){
// for(let t=0;t<Rest["business"].length;t++){
// this.restaurants.push(Rest["business"][t]["name"]);
// }
}
}
pes(){
//return this.menu.slice();
}
output_menu_items_test(){
return this.http.get<Menu_i>('https://www.pidequehaypos.com/customer_chooses_food_type/output_food_and_drink_items').pipe(take(1),
tap(resData => {
// tslint:disable-next-line:no-unused-expression
resData;
// tslint:disable-next-line: max-line-length
console.log('response from logout server ' + JSON.stringify(resData));
})
);
}
}
html file
<ListPicker #picker
id="pickerid"
class="p-15"
[items]="pokemons"
(selectedIndexChange)="onSelectedIndexChanged($event)">
</ListPicker>
Need to use async with the service.
ngOnInit() {
let items = [];
let subscr;
this.myItems = RxObservable.create(subscriber => {
subscr = subscriber;
subscriber.next(items);
return function () {
console.log("Unsubscribe called!");
};
});
this.service_men.output_included_sides().subscribe(
(r) => {
console.log("result: ", r)
for (let x = 0; x < r.length; x++) {
items.push(r[x]['name']);
subscr.next([...items]);
}
}
);
}
<ListPicker #picker id="pickerid" class="p-15" [items]="myItems | async"
(selectedIndexChange)="onSelectedIndexChanged($event)">
</ListPicker>
working example below
https://play.nativescript.org/?template=play-ng&id=zthg0B&v=54
I have a list of services that have multiple property like serviceId, serviceName and photoProfile called from a database using a spring REST API.
The 'photoProfile' property only has the id of the profile picture which if you use the 'localhost:8082/downloadFile/'+photoProfile would get you the image which is in turn is stored in a folder in the spring project.
After looking for a while online, I've found how I can actually get the real image to display on my website but now I'm stuck since I need to do this for the whole list.
Here's my angular code:
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { LoginComponent } from '../login/login.component';
import { UserService } from '../user.service';
import { Observable, forkJoin } from 'rxjs';
import { HttpHeaders, HttpClient } from '#angular/common/http';
import { combineLatest } from 'rxjs/operators';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
loggedIn: boolean;
services: any[] = [];
imgSrc: any;
newList: any[] = [];
constructor(private router: Router, private service: UserService, private http: HttpClient) {
}
ngOnInit() {
this.service.getServices().subscribe(res => {
this.services = res;
console.log('services: ', this.services);
});
for (let i = 0; i < this.services.length; i++) {
const element = this.services[i];
this.getImage('http://localhost:4200/downloadFile/' + element.photoProfile).subscribe(data => {
this.createImageFromBlob(data);
});
this.newList.push(this.imgSrc);
console.log(this.newList);
//I want to add the element from the services list and the image value after being converted to the new list
}
}
getImage(imageUrl: string): Observable<Blob> {
return this.http.get(imageUrl, {responseType: 'blob'});
}
createImageFromBlob(image: Blob) {
const reader = new FileReader();
reader.addEventListener('load', () => {
this.imgSrc = reader.result;
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
}
Thank you for your help.
You need to add the new list inside the ngOnInit after you are subscribing to the services list. Because currently. You don't have the services when the for loop runs. You need to run the for loop after you have the result from services. Like this:
ngOnInit() {
this.service.getServices().subscribe(res => {
this.services = res;
console.log('services: ', this.services);
for (let i = 0; i < this.services.length; i++) {
const element = this.services[i];
this.getImage('http://localhost:4200/downloadFile/' + element.photoProfile).subscribe(data => {
this.createImageFromBlob(data);
element.imgSrc = this.imgSrc;
this.newList.push(element);
});
console.log(this.newList);
}
}
});
I had similar situation, and method of Muhammad Kamran work particularry for me, because images loaded into array absolutely randomly. As i understand, the speed of FOR cycle is faster than picture download speed. The solution is - pushing into array in createImageFromBlob (in case of i'mgnome). In my case it was like this:
export interface File {
...
original_name: name of file;
linkToPicture: string;
image: any;
}
...
files: File[] = [];//array for incoming data with link to pictures
this.getTable(...)
...
getTable(sendingQueryForm: QueryForm){
this.queryFormService.getTable(sendingQueryForm)
.subscribe(
(data) => {
this.files=data as File[];
for (let i = 0; i < this.files.length; i++) {
this.getImage('/api/auth/getFileImage/' + this.files[i].linkToPicture).subscribe(blob => {
this.createImageFromBlob(blob,i);
});
}
},
error => console.log(error)
);
}
getImage(imageUrl: string): Observable<Blob> {
return this.http.get(imageUrl, {responseType: 'blob'});
}
createImageFromBlob(image: Blob, index:number) {
const reader = new FileReader();
reader.addEventListener('load', () => {
this.files[index].image = reader.result;
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
and in HTML:
<div *ngFor="let block of files; let i = index" >
<mat-card class="grid-card">
<div>
<img [src]="block.image" width=120>
<p>{{block.original_name}}</p>
</div>
</mat-card>
</div>
I hope it will useful for someone and thanks for topic!
For some reason the response JSON is not mapping correctly
Here is my html.
profile-search.component.html
<h3>Enter Username</h3>
<input (keyup)="search($event.target.value)" id="name" placeholder="Search"/>
<ul>
<li *ngFor="let package of packages$ | async">
<b>{{package.name}} v.{{package.repos}}</b> -
<i>{{package.stars}}</i>`enter code here`
</li>
</ul>
Here is component that the html pulls from.
profile-search.component.ts
import { Component, OnInit } from '#angular/core';
import { Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { NpmPackageInfo, PackageSearchService } from './profile-search.service';
#Component({
selector: 'app-package-search',
templateUrl: './profile-search.component.html',
providers: [ PackageSearchService ]
})
export class PackageSearchComponent implements OnInit {
withRefresh = false;
packages$: Observable<NpmPackageInfo[]>;
private searchText$ = new Subject<string>();
search(packageName: string) {
this.searchText$.next(packageName);
}
ngOnInit() {
this.packages$ = this.searchText$.pipe(
debounceTime(500),
distinctUntilChanged(),
switchMap(packageName =>
this.searchService.search(packageName, this.withRefresh))
);
}
constructor(private searchService: PackageSearchService) { }
toggleRefresh() { this.withRefresh = ! this.withRefresh; }
}
Service that component pulls from.
profile-search.service.ts
import { Injectable, Input } from '#angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '#angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
export interface NpmPackageInfo {
name: string;
}
export const searchUrl = 'https://api.github.com/users';
const httpOptions = {
headers: new HttpHeaders({
'x-refresh': 'true'
})
};
function createHttpOptions(packageName: string, refresh = false) {
// npm package name search api
// e.g., http://npmsearch.com/query?q=dom'
const params = new HttpParams({ fromObject: { q: packageName } });
const headerMap = refresh ? {'x-refresh': 'true'} : {};
const headers = new HttpHeaders(headerMap) ;
return { headers, params };
}
#Injectable()
export class PackageSearchService {
private handleError: HandleError;
constructor(
private http: HttpClient,
httpErrorHandler: HttpErrorHandler) {
this.handleError = httpErrorHandler.createHandleError('HeroesService');
}
search (packageName: string, refresh = false): Observable<NpmPackageInfo[]> {
// clear if no pkg name
if (!packageName.trim()) { return of([]); }
// const options = createHttpOptions(packageName, refresh);
// TODO: Add error handling
return this.http.get(`${searchUrl}/${packageName}`).pipe(
map((data: any) => {
return data.results.map(entry => ({
name: entry.any[0],
} as NpmPackageInfo )
)
}),
catchError(this.handleError('search', []))
);
}
}
I have tried to alter
return this.http.get(`${searchUrl}/${packageName}`).pipe(
map((data: any) => {
return data.results.map(entry => ({
name: entry.any[0],
} as NpmPackageInfo )
)
to
login: data.login, and login: entry.login but keep getting the below error.
http-error-handler.service.ts:33 TypeError: Cannot read property 'map'
of undefined
at MapSubscriber.project (profile-search.service.ts:49)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next
(map.js:75)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
(Subscriber.js:93)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next
(map.js:81)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
(Subscriber.js:93)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next
(filter.js:85)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
(Subscriber.js:93)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext
(mergeMap.js:136)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next
(InnerSubscriber.js:20)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
(Subscriber.js:93)
results in data.results is probably undefined, check that the data object matches the schema you're expecting it to.
map working on array but this.http.get(${searchUrl}/${packageName}) return object not array.
so data.results is undefined.
This is how I converted my object into an array, if anyone has a better way of doing please let me know.
return this.http.get(`${searchUrl}/${packageName}`).pipe(
map((data: any) => {
console.log(data);
var profile = Object.keys(data).map(function(key) {
return [(key) + ': ' + data[key]];
}
);
console.log(profile);
data = profile;
return data;
}),
catchError(this.handleError<Error>('search', new Error('OOPS')))
);
}
}
I fixed this issue by eliminating ".results"
from
.map((data: any) => this.convertData(data.results))
to
.map((data: any) => this.convertData(data))
To avoid the error, change
map((items) => items.map
to
map((items) => items?.map
Then set your result set as an empty array:
this.list = data ?? [];
PS: Used with Angular 14. In older versions you may need to change last one to data ? data : []
...component.ts:
import { Component } from '#angular/core';
import { ValgteSkolerService } from '../valgteSkoler.service';
import { DatoService } from './datoer.service';
#Component({
selector: 'kalender',
providers: [DatoService],
templateUrl: 'app/kalendervisning/html/kalender.html'
})
export class KalenderComponent {
private valgteSkoleRuter: Array<any> = [];
public datoer: any[] = [];
constructor(private valgteSkolerService: ValgteSkolerService, private DatoService: DatoService) {
this.DatoService
.getDato()
.subscribe(datoer => { this.datoer = datoer; });
}
ngOnInit() {
this.valgteSkolerService.hentLagretData();
this.valgteSkoleRuter = this.valgteSkolerService.delteValgteSkoleRuter;
}
antallRuter: number = 0;
j: number = 0;
ukeEn(mnd: number, aar: number) :Cell[] {
var cells: Array<Cell> = [];
this.antallRuter = 0;
for (this.j = 1; this.j <= this.antallDager(mnd, aar); this.j++) {
var cell = new Cell;
console.log(this.datoer[this.j].dato);
cell.id = this.datoer[this.j].dato;
cell.text = this.j;
cells.push(cell);
this.antallRuter++;
this.j = this.j;
if (this.antallRuter % 7 == 0 && this.antallRuter != 0) {
break;
}
}
return cells;
}
class Cell {
id: string;
text: number;
}
...service.ts:
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import { Observable } from 'rxjs/Observable';
#Injectable()
export class DatoService {
dato: Array<any>;
constructor(private http: Http) {}
getDato() {
return this.http.request('app/kalendervisning/datoer.json')
.map(res => res.json());
}
}
...json:
{
"dato": "2016-08-01"
},
etc.
I am struggling with the cell.id = this.datoer[this.j].dato statement in the component.
I have checked the browser inspector, and it seems like the datoer array is undefined until the whole code has been run through several times. After a while, the array gets filled up. When I tested this with console.log, it prints 9 undefined objects, and then the actual data, but for some reason repeated 2 times also.
I think there might be a problem that the data is not loaded asynchronously, but I'm not sure.
Are there any ideas why it acts like this, and do you have a solution?
add constrctor code of calling API inside ngOnInit :
ngOnInit() {
this.DatoService
.getDato()
.subscribe(datoer => { this.datoer = datoer; });
this.valgteSkolerService.hentLagretData();
this.valgteSkoleRuter = this.valgteSkolerService.delteValgteSkoleRuter;
}
I need to generate sanitized css property to use with my component template to set the background image of the div:
<div *ngFor="let Item of Items"
[style.background-image]="Item.imageStyle
(click)="gotoDetail(Item.iditems)">
</div>
using data obtained through a data service. The component is:
import { Component } from '#angular/core';
import { Router } from '#angular/router';
import { DomSanitizer } from '#angular/platform-browser';
import { OnInit } from '#angular/core';
import { Item } from '../models/Item';
import { CollectionDataService } from '../services/CollectionData.service';
#Component({
selector: 'mainpage',
templateUrl: 'app/mainpage/mainpage.component.html',
styleUrls: ['app/mainpage/mainpage.component.css']
})
export class MainpageComponent implements OnInit {
Items: Item[];
ngOnInit() {
this.collectionDataService.getItems().subscribe(
Items => this.Items = Items
);
// Generates and sanitizes image links
this.Items.map(
(LItem) => LItem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+LItem.iditems+".jpg)")
)
}
constructor(
private router: Router,
private sanitizer: DomSanitizer,
private collectionDataService: CollectionDataService
) {
}
gotoDetail($iditems: number): void {
this.router.navigate(['/viewer', $iditems]);
}
}
But it doesn't work because the statement that generates the sanitized property
this.Items.map(
(LItem) => LItem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+LItem.iditems+".jpg)")
)
doesn't find the loaded data. The error that I'm seeing in the browser console is:
core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Error in ./MainpageComponent class MainpageComponent_Host - inline template:0:0 caused by: Cannot read property 'map' of undefined
TypeError: Cannot read property 'map' of undefined
The data service is:
import { Injectable } from '#angular/core'
import { Http } from '#angular/http'
import { Item } from '../models/Item';
import { DomSanitizer } from '#angular/platform-browser';
#Injectable()
export class CollectionDataService {
constructor(
private http: Http,
private sanitizer: DomSanitizer
) { }
getItems() {
return this.http.get('app/mocksdata/items.json').map(
response => <Item[]>response.json().items
)
}
}
And the provided items.json:
{
"items": [{
"iditems": 1,
"imageStyle": ""
}, {
"iditems": 2,
"imageStyle": ""
}]
}
If I set static data in the component, instead of using the data service, everything works:
export class MainpageComponent implements OnInit {
Items: Item[];
ngOnInit() {
this.Items = [{
"iditems": 1,
"imageStyle": ""
}, {
"iditems": 2,
"imageStyle": ""
}]
// Generates and sanitizes image links
this.Items.map(
(LItem) => LItem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+LItem.iditems+".jpg)")
)
}
How can I force the sanitizer statement to wait that the async data are fully loaded? Alternatively how can I generate sanitized properties directly in the service?
EDIT
The best answer comes from PatrickJane below:
Items: Item[] = [];
ngOnInit() {
this.collectionDataService.getItems().subscribe(Items => {
this.Items = Items;
this.Items.map(LItem => LItem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+LItem.iditems+".jpg)"))}
});
}
I also solved this problem working directly in the service method (credits), but it is more verbose:
return this.http.get('app/mocksdata/items.json')
.map( (responseData) => {
return responseData.json().items;
})
.map(
(iitems: Array<any>) => {
let result:Array<Item> = [];
if (iitems) {
iitems.forEach((iitem) => {
iitem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+iitem.iditems+".jpg)");
result.push(<Item>iitem);
});
}
return result;
}
)
The subscribe function is async so your map function called before the subscribe function run. So in this phase the array is undefined because you doesn't set any initial value.
The solution is to do this inside the subscribe function and to initialize the Items with empty array.
Items: Item[] = [];
ngOnInit() {
this.collectionDataService.getItems().subscribe(Items => {
this.Items = Items;
this.Items.map(LItem => LItem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+LItem.iditems+".jpg)"))}
});
}