I'm having a problem calling the data into the view. Console log is working as I included a screenshot.
ytapiUrl =https://www.googleapis.com/youtube/v3/playlistItems? part=snippet&playlistId='blahblahbla'
getECvideolists(){
return new Promise(resolve => {
this.httpClient.get(this.ytapiUrl).subscribe(ytdata => {
resolve(ytdata);
this.Ecvideos = ytdata;
console.log(ytdata);
}, err => {
console.log(err);
});
});
}
<ion-list *ngSwitchCase="'videos'">
<ion-item *ngFor="let Ecvideo of Ecvideos">
<h2> ***this doesn't display*** {{Ecvideo.items.snippet.title}}</h2>
</ion-item>
</ion-list>
[
items key has an array so you need to iterate it through *ngFor
for example,
<ion-list *ngSwitchCase="'videos'">
<ion-item *ngFor="let item of Ecvideos.items">
<h2>{{item.snippet.title}}</h2>
</ion-item>
</ion-list>
Related
users: any = [];
runHttp(){
this.http.get('https://reqres.in/api/users?page=2').subscribe(data => {
console.log(data);
this.users = Object.values(data);
})
}
and html screen :
ion-button (click)="runHttp()" >User çek</ion-button>
<ion-list *ngFor='let user of users'>
<ion-item>
<h2>{{user.email}}</h2>
</ion-item>
</ion-list>
but h2{{user.email}} is empty in html screen why ?
I'm very new in software project and currently working on final year project, mobile apps using ionic 3 framework. I have drag and drop function, first bucket with list of items and second bucket is empty. When I want to drag the items from 1st bucket to the 2nd bucket, I want to calculate the price for each entry at the second bucket but I really don't have idea to do it. Can someone help me with the codes :(
this is my calculate.ts
q1 = [];
q2 = [];
details: any = [];
totalPrice: number;
constructor(public navCtrl: NavController, private postPvdr: PostProvider, public navParams: NavParams, public dragulaService: DragulaService, public AlertController:AlertController) {
dragulaService.drop().subscribe((value) => {
console.log(value)
});
const bag: any = this.dragulaService.find('bag');
if (bag !== undefined ) this.dragulaService.destroy('bag');
this.dragulaService.createGroup('bag', {
revertOnSpill: true,
});
}
ionViewDidLoad() {
this.details = [];
this.getlist();
this.getTotalPrice()
}
getlist(){
let body = {
aksi: 'get_user'
};
this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
for(let detail of data.result){
this.details.push(detail);
console.log(data);
}
});
}
getTotalPrice(){
let totalPrice = 0;
let body = {
aksi: 'get_user'
};
this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
for(let detail of data.result){
totalPrice += Number.parseFloat(detail.dest_budget);
}
});
console.log(totalPrice);
return totalPrice;
}
these lines of codes seem weird because i just do try n error
this is my calculate.html
<ion-content padding>
<ion-row>
<ion-col width-50 class="left">
<div class="header">First Bucket</div>
<ion-list [dragula]='"bag"' [(dragulaModel)]="details">
<button ion-item *ngFor="let detail of details">
{{detail.dest_name}}
<p>{{ detail.dest_budget}}</p>
</button>
</ion-list>
</ion-col>
<ion-col width-50 class="right">
<div class="header">Second Bucket</div>
<ion-list [dragula]='"bag"' [(dragulaModel)]="q2">
<div ion-item *ngFor="let detail of q2">
{{detail.dest_name}}
<p>{{ detail.dest_budget }}</p>
</div>
</ion-list>
</ion-col>
</ion-row>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Total Price:</ion-title>
</ion-toolbar>
</ion-footer>
the total price should be showing at the footer
here is my interface looks like
hope someone can help :)
call function here
dragulaService.drop().subscribe((value) => {
this.getTotalPrice();
});
modify the function
getTotalPrice(){
this.totalPrice = 0;
let body = {
aksi: 'get_user'
};
this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
for(let detail of data.result){
this.totalPrice += Number.parseFloat(detail.dest_budget);
}
});
}
and bind model
<ion-footer>
<ion-toolbar>
<ion-title>Total Price:{{totalPrice}}</ion-title>
</ion-toolbar>
</ion-footer>
i stuck , please help me
I am using ion-searchbar , i want that when there is no text on the searchbar the list must be hide but the list is still showing
Can anyone help me?
in .html file
<ion-searchbar (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
{{ item }}
</ion-item>
</ion-list>
in .ts file
getItems(ev) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the ev target
var val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
You can use ngModel and ngIf :
<ion-searchbar [(ngModel)]="searchInput" (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list *ngIf="searchInput !== ''">
<ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
{{ item }}
</ion-item>
</ion-list>
in .ts:
public searchInput='';
OR
If your variable items is empty at initalization :
<ion-searchbar (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list *ngIf="items && items.length">
<ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
{{ item }}
</ion-item>
</ion-list>
in .ts:
public items = [];
Here I m getting data I applied the infinite scrolling but the items didn't show on my scroll page below is my code:
.html
<ion-list
*ngFor="let infi of IfoData;" (click)="Item(infi.Id)" >
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content>
<ion-item>
<div >
<p>{{infi.Cost}}</p>
</div>
</ion-item>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
.js
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.IfoData.push( this.IfoData.length );
}
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
}
After implementing this code I am just getting empty screen the data is not showing in the template and without implementing this infinite scroll it is displaying.
Infinite scroll component must comes last element in ion-content. You should try like this
<ion-content>
<ion-list>
<ion-item class="itm" *ngFor="let i of IData;" (click)="goItem(i.Id,i.Name)">
<ion-avatar item-start role="img">
<img [src]="'data:image/png;base64,'+i.Image" style="width: 110px;">
</ion-avatar>
<div class="item-inner">
<h2 class="_nme">{{i.Name}}</h2>
<p class="_price">{{i.Cost}}</p>
<ion-icon name="arrow-dropright"></ion-icon>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
ion-infinite-scroll-content is to change the default spinner and add text in infinite scroll
Refer the docs for details
put infinite scroll at the last in ion-content
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
and in your ts file
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.iData.push( this.iData.length );
}
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
I have tried every solution but nothing has worked. I am building a chat app where i want it to be scrolled to last message automatically,also when new message comes it scrolls to the bottom.
I have tried scrollTo() on the #content but it doesn't work
chat.html
<ion-content #content *ngIf="buddy">
<div class = "chatwindow">
<ion-list no-lines *ngIf="allmessages">
<ion-item *ngFor = "let item of allmessages; let i = index" text-wrap>
<ion-avatar item-left *ngIf="item.sentby === buddy.uid">
<img src="{{buddy?.photoURL}}">
</ion-avatar>
<div class="bubble me" *ngIf="item.sentby === buddy.uid">
<h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
<img src="{{item?.message}}" *ngIf="imgornot[i]">
</div>
<ion-avatar item-right *ngIf="item.sentby != buddy.uid">
<img src="{{photoURL}}">
</ion-avatar>
<div class="bubble you" *ngIf="item.sentby != buddy.uid">
<h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
<img src="{{item?.message}}" *ngIf="imgornot[i]">
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
chat.ts
#ViewChild('content') content: Content;
scrolltoBottom() {
setTimeout(() => {
// this.content.scrollToBottom();
}, 1000);
}
Your code should be like this.
export class ChatPage {
#ViewChild('content') content: Content;
constructor(public navCtrl: NavController) {
this.scrolltoBottom()
}
scrolltoBottom() {
setTimeout(() => {
this.content.scrollToBottom();
}, 300);
} }