This is probably asked, but I am looking for a most efficient way to update view in a component which fetches data from server, taking that I delete an item from the server in other component
service
getAllMessages(): Observable<any> {
return this.http.get('/api/messages/);
}
applyTagToMessage(messageId): Observable<any> {
return this.http.delete('/api/messages/' + messageId)
}
componentA
this.messageService.getAllMessages().subscribe(data = > {
this.messages = data;
})
<div *ngFor="let message of messages">{{message.tags}}</div>
componentB
addTagToMessage(messsageId)
this.messageService.applyTagToMessage(messageId).subscribe(data = > {
alert("success added tag to message")
})
}
<button (click)="addTagToMessage(messageId)"></button>
So the question how to update the componentA which fetches the data from server when I delete the item from server? Should I use async pipe?
You can use an EventEmitter in your service whenever you change/reload your data. Then subscribe to that event in component A.
Handle the deletion/adding of the items in component B through your service.
https://angular.io/api/core/EventEmitter
In my template I do use an async pipe wherever I'm expecting data to change.
<div *ngFor="let exp of model$ | async">
Where model$ is defined as an observable:
private model$: Observable<Experiment[]>;
Related
I'm new in Firebase. I'm using Firestore database and Ionic, I have this problem with an asynchronous call and I can't solve it. Basically in the item variable goes the data that I have saved in the firestore database. But when I want to show them, through a button, in a new html page a strange thing happens, in the url the passed parameter appears and disappears immediately and nothing works anymore. I had a similar problem in the past that I solved using the angular pipe "async" , but in this case it doesn't even work.
In detail, I have a list of items in a component:
ngOnInit() {
this.itemService.getItemsList().subscribe((res)=>{
this.Tasks = res.map((t) => {
return {
id: t.payload.doc.id,
...t.payload.doc.data() as TODO
};
})
});
}
and in item.service.ts I have defined the function:
constructor(
private db: AngularFireDatabase,
private ngFirestore: AngularFirestore,
private router: Router
) { }
getItemsList() {
return this.ngFirestore.collection('items').snapshotChanges();
}
getItem(id: string) {
return this.ngFirestore.collection('items').doc(id).valueChanges();
}
For each item I have a button to show the detail:
<ion-card *ngFor="let item of Tasks" lines="full">
....
<ion-button routerLinkActive="tab-selected" [routerLink]="['/tabs/item/',item.id]" fill="outline" slot="end">View</ion-button>
In component itemsDescription.ts I have:
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id'];
});
this.itemService.getItem(this.id).subscribe((data)=>{
this.item=data;
});
}
Finally in html page:
<ion-card-header>
<ion-card-title>{{item.id}}</ion-card-title>
</ion-card-header>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-label>{{item.Scadenza.toDate() | date:'dd/MM/yy'}}</ion-label>
<ion-card-content>{{item.Descrizione}}</ion-card-content>
The Scadenza and Descrizione information are shown, instead id is not. Also the url should be tabs/items/:id but when I click on the button to show the item information, the passed parameter immediately disappears and only tabs/items is displayed. If I remove the data into {{}}, the parameter from the url doesn't disappear
SOLVED
I followed this guide https://forum.ionicframework.com/t/async-data-to-child-page-with-ionic5/184197. So putting ? , for example {{item?.id}} now everything works correctly
Your nested code order not right. You will get the value of id after subscription.
Check this Code:
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id'];
this.profileService.getItem(this.id).subscribe((data)=>{
this.item=data;
});
});
}
I have an app that saves items in an sqlite database and shows them in a list view.
It loads the listview with the correct data at the beginning of the app, but it doesn't refreshes the listview when I add a new item to the database.
This is the component.ts where I load the items to the observable
export class HomeComponent implements OnInit {
items: ObservableArray<IDataItem>;
constructor(public _itemService: DataService) {
}
ngOnInit(): void {
this.items = this._itemService.selectItems();
}
}
This is the DataService:
export class DataService {
private items = new ObservableArray<IDataItem>();
private database = new DatabaseService();
private db: any;
selectItems(): ObservableArray<IDataItem> {
this.database.getdbConnection()
.then(db => {
db.all("SELECT * FROM items").then(rows => {
for (let row in rows) {
this.items.push({ id: rows[row][0], sitioWeb: rows[row][1], usuario: rows[row][2], password: rows[row][3] });
}
this.db = db;
}, error => {
console.log("SELECT ERROR", error);
});
});
for(let i = 0; i < this.items.length; i++){
Toast.makeText(""+this.items[i].id+" "+this.items[i].sitioWeb+" "+this.items[i].usuario+" "+this.items[i].password,"10")
}
return this.items;
}
getItems(): ObservableArray<IDataItem> {
return this.items;
}
getItem(id: number): IDataItem {
return this.items.filter((item) => item.id === id)[0];
}
}
This is the view where the listview is located at:
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<GridLayout class="page page-content" >
<ListView [items]="items | async" class="list-group" >
<ng-template let-item="item">
<Label [nsRouterLink]="['../item', item.id]" [text]="item.sitioWeb" class="list-group-item"></Label>
</ng-template>
</ListView>
</GridLayout>
It only loads items to the list view on the init of the app, but I want to refresh it when an item is added.
A simple solution would be to either fire a new request to get the list after you add a new item, or just add it in memory on the front end if you get a success response from the save request. However, while this would work, it's not a great solution. It wouldn't update the list when another user added an item.
I think you should look into using websockets for this. You can have a socket open listening for messages on the front end. The back end would emit a message every time something was added, even if it was added by another user. The front end listener would add that item to the list.
Here is a good tutorial using Sock.js and STOMP to implement websockets in angular.
https://g00glen00b.be/websockets-angular/
You can create sharer service with list of your item like this:
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs';
#Injectable()
export class DataService {
private messageSource = new BehaviorSubject('default message');
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}
Where currentMessage is your list of items. Bind that list to you html and in callback function on create new item call method changeMessage witch will be add new created item in your array.
See this example
And not forget subscribe on changes in your list component.
Once you add a new item to the database you can call selectItems() service which will update the item list whenever new item is added or you can call selectItems() in ngAfterViewChecked() hook as it is executed every time the view of the given component has been checked by the change detection algorithm of Angular. This method executes after every subsequent execution of the ngAfterContentChecked()
First of all, sorry if my english isn't perfect, I'm french.
I'm creating a mobil app with Ionic 3 / angular 4.
My data are stored in a local JSON file in "assets/data" and I'm accessing it with a Provider.
I have a homePage with formular with data value for my 'selector/option input' and I request my provider which returns data by filter/sort etc ...
Everything works but ... it's kind of ugly.
For now, I'm actually using a button at the top of my form to initialize my Provider because I'm calling the 'http.get' method in my Provider constructor (Yeah ... I know it's kind of bad).
I'm using this temporary solution while waiting to find a way to initialize my Provider on the splash screen or in 'ionViewDidLoad' Event ...
my Provider constructor :
#Injectable()
export class DataBaseProvider {
capaciteUrl = './assets/data/capacite.json';
mixageUrl = "./assets/data/mixage.json";
mixageData: any;
capaciteData: any;
constructor(public http: Http) {
console.log('dataBase init');
this.http.get(this.capaciteUrl)
.map(res => res.json())
.subscribe( data => this.capaciteData = data.data);
this.http.get(this.mixageUrl)
.map(res => res.json())
.subscribe( data => this.mixageData = data.data);
}
my 'initializer' function in my homePage.ts ( called by button )
init() {
this.dataBase.getDataSelector()
.then(data => {
this.mixage = data['mixage'];
this.capacite = data['capacite'];
this.firstIngredient = this.secondIngredient = data['ingredient'];
})
}
A part of my form :
<ion-select [(ngModel)]="mixageSelector" okText="Select">
<ion-option *ngFor="let mix of mixage" [value]="mix.id"> {{mix.name}} </ion-option>
</ion-select>
Where can I call the Http.get method or How can I rewrite my module to call Http method at loading/splashScreen of my application ? ( I also try to call my getDataSelector() in an ionViewDidLoadEvent() but nothing changes ... )
I'm working on a feature for my website to provide news feed. To get news feed, I have generated an API key from here : News API. The problem I'm facing is that, I'm not able to display the content in my browser. Let me share my code :
results.component.html
<ul type="none" id="search-options">
<li [class.active_view]="Display('all')" (click)="docClick()">All</li>
<li [class.active_view]="Display('news')" (click)="newsContent()">News</li>
<li [class.active_view]="Display('images')" (click)="imageClick()">Images</li>
<li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li>
</ul>
In results.component.html, it has 4 tabs. In tabs with name : All, Image, Video - I'm getting data from the server from which the desired results are fetched based on query. But in News tab, I'm trying to integrate it with the API which I have mentioned above. Clicking on that tab, should show news feed (just keeping it simple). But, it does not displays anything when news tab is clicked. (No console errors) However, if I use html repeater, how I'm going to use it here ?
news.component.ts
newsFeed: {};
resultDisplay: string;
constructor(private _newsService: NewsService) {}
Display(S) {
return (this.resultDisplay === S);
}
newsContent() {
this.resultDisplay = 'news';
this._newsService.getNews().subscribe(data => {
this.newsFeed = Object.assign({}, data);
});
}
news.service.ts
import { Injectable } from '#angular/core';
import { Http, Jsonp } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class NewsService {
public generalNews: string = 'https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=abc123';
constructor(
private http: Http,
private jsonp: Jsonp
) { }
getNews() {
return this.http.get(this.generalNews).map(response => {
response.json()
});
}
}
It would be great if anybody can point out what mistake I'm doing and provide me the solution to improve it. Thanks in advance. :)
Based on what I got from your question. You should do the following.
Have a repeater on your html first. Something like:
<div *ngFor = "let news of newsList">
<p> {{news}} </p>
</div>
This way you can iterate the news array on your html one news at a time.
Next thing, is getting the response and passing it to the view. I am assuming you get the news on click of <li>, as that is all your view presently contains. So in your component you should have
private newsList: any[] = [] //initializing a blank list of type any.
newsContent() {
this.resultDisplay = 'news'; //not sure why you need this, but let it be for now
this._newsService.getNews().subscribe(data => {
this.newsList = data; //assuming data is the actual news array, if the data is entire response you might have to go for data.data
});
}
This way your newsList variable is populated and will be iterated on the html. May be you might have to make few adjustment but it should help you start.
Let me know if it helps or any further issue faced.
Few more changes would be required based on your response:
First : return data from your service method like:
getNews() {
return this.http.get(this.generalNews).map(response:any => {
return response.json()
});
}
Second, your data contains news in article array. So use that instead:
newsContent() {
this.resultDisplay = 'news'; //not sure why you need this, but let it be for now
this._newsService.getNews().subscribe(data => {
this.newsList = data.article; //assuming data is the actual news array, if the data is entire response you might have to go for data.data
});
}
Next edit your html to bind a particular field of your news. I am binding title you can bind one or more that you like:
<div *ngFor = "let news of newsList">
<p> {{news.title}} </p>
</div>
Try this. should work now.
You have missed return statement return response.json().
news.service.ts
import { Injectable } from '#angular/core';
import { Http, Jsonp } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class NewsService {
public generalNews: string = 'https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=abc123';
constructor(
private http: Http,
private jsonp: Jsonp
) { }
getNews() {
return this.http.get(this.generalNews).map(response => {
return response.json();
});
}
}
So i have a Modal Component with a form in it, this component is used for both creating an entry to the DB and editing an existing one.
It has a subscription option to the onSubmit event, which is being executed on a successful submit.
What happens for some reason is that some of this component's element subscription executes and some won't, and it looks like those on the "create-mode" will and those on the "edit-mode" wont.
Code Section
CreateOrUpdateTransactionComponent:
#Component({
selector: 'create-update-transaction',
templateUrl: './CreateOrUpdateTransaction.html',
providers: [AccountTransactionsService]
})
export class CreateOrUpdateTransactionComponent {
closeResult: string;
modalRef: NgbModalRef;
#Input() transaction: Transaction = new Transaction();
#Input() isCreate: boolean;
#Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();
constructor(private modalService: NgbModal,
private transactionsService: AccountTransactionsService) {}
sendTransaction(): void{
let localModalRef = this.modalRef;
this.transactionsService.createOrUpdateTransaction(this.transaction, (isSuccessful)=>{
if (isSuccessful) {
this.onSubmit.emit(); //<--- The problem is here
localModalRef.close();
}
});
}
}
The HTML:
<table>
<caption>Account Transactions</caption>
<thead>
// Omitted thead
</thead>
<template let-transaction ngFor [ngForOf]="accountTransactions" let-i="index">
<tr data-toggle="collapse" [attr.data-target]="'#'+i">
// Omitted <td>s
<td> //<----These updateTransactions() are not being executed
<create-update-transaction [isCreate]="false" [transaction]="transaction" (onSubmit)="updateTransactions()"></create-update-transaction>
</td>
</tr>
<div class="container collapse" [attr.id]="i">
// some content
</div>
</template>
</table>
<create-update-transaction [isCreate]="true" (onSubmit)="updateTransactions()"></create-update-transaction>
//<---- This updateTransactions() successfully executes
Notice
If I only display one row in the table not using ngFor (keeping the call to the back-end to update the DB), it works perfectly fine.
Any idea why would this happen?
Thanks in advance!
Update1
Debugging i could notice that when on the create-mode the this.onSubmit.observers is an array with one observer and on the edit-mode its an array with 0 observers, so thats the problem. any idea why?
Update2
Debugging again and found that the this in this.transactionsService.createOrUpdateTransaction... is fine and its' onSubmit.observers contains 1 observer, before reaching the callback's code, in which the this.onSubmit.observers is an array of 0 observers
AccountTransactionsService:
#Injectable()
export class AccountTransactionsService{
private loggedBankAccount: number;
private queryObservable: ObservableQuery;
constructor(private userManagingService: UserManagingService) {
this.loggedBankAccount = userManagingService.getLoggedBankAccountNumber();
this.queryAccountTransactions();
}
queryAccountTransactions(): void{
this.queryObservable = // querying the back-end
}
createOrUpdateTransaction(transaction: Transaction, callback: (isSuccessfull: boolean) => void): void{
let isSuccessful: boolean = false;
client.mutate(/*inserting the backend*/).then((graphQLResult) => {
const { errors, data } = graphQLResult;
if (data) {
console.log('got data', data);
isSuccessful = true;
}
if (errors) {
console.log('got some GraphQL execution errors', errors);
}
callback(isSuccessful);
}).catch((error) => {
console.log('there was an error sending the query', error);
callback(isSuccessful);
});
}
getAccountTransactions(): ObservableQuery{
return this.queryObservable;
}
}
Notice
If i just execute the callback give to the AccountTransactionService.createOrUpdateTransaction (removing the call to the back-end to actually update the DB) it works perfectly fine and all the subscribers to this onSubmit event are being called.
this Console image
Set the null as a parameter :
this.onSubmit.emit(null);
So I found out the case was that the data the ngFor is bound to was being replaced by a new instance as I updated the backend, hence, it rerendered it's child Components causing reinitializing (destory + init) of them, which made the instance of the Component to be overwritten.
In order to solve this issue i have changed the querying of the accountTransaction to be only one time querying, on initializing of the parent component, and never refetching again (which triggers the rerendering).
Im displaying to the client the changes only if they succeeded on the server side, and if they failed i use a backup of the data, so the client is kept update of the real state of the server WITHOUT refetching
For the future lookers to come:
The key to the problem was that the Parent Component's *ngFor depended on data that was changing in the Child Components, causing reinitializing of the *ngFor (the Child Components) BEFORE finishing executions of the Child Components methods.
Hope it'll be helpful to somebody :)