When ı run app and click notifications data appears in the template after a 10-15 seconds.
I checked the data with the console log when I was pulling datas, datas are coming normally(fast), the problem is that it shows late in HTML.
When I enter the notifications page : https://prnt.sc/11dtqkj
After waiting for 10-15 seconds :
https://prnt.sc/11dttn4
How can ı fix this problem ?
notifications.page.ts :
ionViewWillEnter(){
this.auth.currentUser.then(user=>{
this.userUid = user.uid
this.db.database.ref("/users/"+user.uid+"/notifications/").once("value",snap=>{this.notifications=[],snap.forEach(a=>{
this.db.database.ref("/users/"+a.child("who").val()+"/name").once("value",a2=>{let temp_a=a;
this.db.database.ref("/users/"+temp_a.child("who").val()+"/pp").once("value",a3=>{let temp_a2=temp_a; let a2_name = a2.val();
let type = temp_a2.child("type").val();
let not_key = temp_a2.key;
let name = a2_name;
let pp = a3.val();
let who = temp_a2.child("who").val();
let formId = temp_a2.child("formId").val();
let result = temp_a2.child("result").val();
if(type=="request"){
this.notifications.push({notKey:not_key,type:type,name: name,pp:pp,who:who,formId:formId});
}
else if(type=="response"){
this.notifications.push({type:type,name:name,pp:pp,who:who,result:result});
}
})
});
})
})
})
}
notifications.page.html
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Bildirimler</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list >
<div *ngFor="let item of notifications;let i index ">
<ion-item *ngIf="item.type=='request'">
<ion-avatar slot="start">
<img src={{item.pp}}>
</ion-avatar>
<ion-label style="white-space: pre-wrap;"><strong>{{item.name}}:</strong>adlı kullanıcı beraber kamp yapmak istiyor.</ion-label>
<ion-label><ion-button (click)="accept(item.who,item.formId,item.notKey,i)" style="width: 50%;" color="secondary"><ion-icon name="checkmark-outline"></ion-icon></ion-button>
<ion-button (click)="reject(item.who,item.notKey,item.formId,i)" color="light"><ion-icon name="close-outline"></ion-icon></ion-button></ion-label>
</ion-item>
<ion-item *ngIf="item.type=='response'">
<ion-avatar slot="start">
<img src={{item.pp}}>
</ion-avatar>
<ion-label style="white-space: pre-wrap;"><strong>{{item.name}}:</strong>adlı kullanıcı tarafından katılma isteğiniz {{item.result}}</ion-label>
</ion-item>
</div>
</ion-list>
</ion-content>
Related
As per screenshot attachment, I would like all Ion Items sliding to open together when I trigger the Edit Button in a div,
Currently it only slides out the 1st delete ion items and the others remain unopened.
this is my code
HTML
<div class="editcontainer1" (click)="trigger()">Edit</div>
<ion-item-group *ngFor="let p of cart" #myItemsId >
<ion-item-sliding #slidingItem lines="none">
<div class="maincontainer">
<ion-item>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="danger"
(click)="removeCartItem(p)">
<div style="color: seashell;">Delete</div>
</ion-item-option>
</ion-item-options>
</div>
</ion-item-sliding>
</ion-item-group>
TS
trigger() {
this.itemSlidingList.open('end');
}
else {
this.itemSlidingList.close();
}
how do i modify to become opens all?
openAllSlides(item) {
let a = Array.prototype.slice.call(item.el.children)
a.map((val) => {
val.open();
})
}
thank you.
Screenshot
you can do something like:
<ion-list>
<ion-item-group #myItemsId> <!-- use ITEM id for group -->
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<ion-label>Item Options</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option >Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
<ion-button (click)="openAllSlides(myItemsId)">open all slides</ion-button>
.ts
openAllSlides(item){
let a = Array.prototype.slice.call( item.el.children )
a.map((val)=>{
val.open();
})
}
I've try to use console.log to view the value, but noticeSet2[index] value is undefined. And when I print noticeSet, it will show all the data in the array. And I've try to print the index at console.log, and it show the index that match the array.
I try to create a sub menu in the sub menu of a main menu which is noticeSet and the main menu work just fine. I try the similar method and it doesn't work. all I need to solve now is to show the noticeSet2[index] value. Thanks
toggleItem(index, item) {
//this.noticeSet2[index].open = !this.noticeSet2[index].open;
console.log("here");
console.log(this.noticeSet2[0]);
console.log(this.noticeSet2[index]);
console.log(index);
let obj = {resident_id: this.resident_id,id: item.id}
this.authService.postData(obj, "getSubCategoryList").then((result) =>{
this.responseData = result;
if(this.responseData.feedData){
//this.noticeSet2[item.id] = this.responseData.feedData;
this.noticeSet3[this.noticeSet2[item.id]] = this.responseData.feedData;
this.isDataAvailable = true;
//console.log(this.noticeSet);
}
}, (err) => {
});
}
<ion-list *ngFor="let item of noticeSet; let i = index;" lines="none" class="accordion-list" detail="false"
no-padding >
<button ion-item tappble style="font-weight:bold;color:#424242;" (click)="getSubCategoryList(i,item)" [ngClass]="{'section-active':item.open,'section':!item.open}">
<ion-icon item-right slot="end" name="arrow-forward" *ngIf="!item.open"
style="font-size: 16px;font-weight: bold;"></ion-icon>
<ion-icon item-right slot="end" name="arrow-down" *ngIf="item.open"
style="font-size: 16px;font-weight: bold;color:rgb(74, 137, 220)"></ion-icon>
{{ item.title }}
</button>
<div *ngIf="noticeSet2[item.id] && item.open">
<ion-list *ngFor="let item of noticeSet2[item.id]; let j = index;" lines="none" class="child-list">
<button ion-item (click)="toggleItem(j,item)" *ngIf="item.title"
[ngClass]="{'child-active':item.open, 'child':!item.open}">
<ion-icon item-left slot="start" name="add" *ngIf="!item.open" style="font-size: 12px;font-weight: bold;">
</ion-icon>
<ion-icon item-left slot="start" name="close" *ngIf="item.open" style="font-size: 12px;font-weight: bold;">
</ion-icon>
<ion-label>
{{ item.title }}
</ion-label>
</button>
<div *ngIf="noticeSet3[this.noticeSet2[item.id]] && item.open">
<ion-list *ngFor="let item of noticeSet3[this.noticeSet2[item.id]]" class="child-list-list" lines="none">
<ion-item class="child-item" *ngIf="item.title">
<button ion-item >
{{item.title}}
</button>
</ion-item>
</ion-list>
</div>
</ion-list>
</div>
</ion-list>
This is because you use value inside the promise.
You have two ways to proceed:
First one is to use
.then( function() => { [...] }
instead of
.then((result) => { [...] }
it will works.
The Second one is to use special variable NOT inside your {}.
var that = this;
// ...
.then(function() { that.variable })
Hope this help.
I have set up several form that takes info for an upload logic: like one takes then picture, one the description, one other setting. Now I want that this is all stored in one single form, but while it still worked when using different form now I get this error:
ERROR TypeError: Cannot read property 'controls' of undefined
I have no idea why is that. I also cannot submit a new description which I want to make with <div (ngSubmit)="addTag()">
Here is my code:
html:
<form [formGroup]="categoryForm">
<ion-grid class="white">
<ion-row class="checkbox-tags rounded-checkbox-tags">
<ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
<ion-icon name="images"></ion-icon>
<ion-checkbox formControlName="tag_1"></ion-checkbox>
</ion-item>
<ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
<ion-icon name="camera"></ion-icon>
<ion-checkbox formControlName="tag_2"></ion-checkbox>
</ion-item>
</ion-row>
</ion-grid>
<ion-row class="range-item-row">
<ion-col size="12">
<div class="range-header">
<span class="range-value">{{ rangeForm.controls.dual.value.lower }}</span>
<span class="range-label">temperature</span>
<span class="range-value">{{ rangeForm.controls.dual.value.upper }}</span>
</div>
</ion-col>
<ion-col size="12">
<ion-range mode="md" class="range-control" formControlName="dual" color="danger" pin="true" dualKnobs="true" debounce="400"></ion-range>
</ion-col>
</ion-row>
<div (ngSubmit)="addTag()">
<ion-item>
<ion-input [disabled]="tagList?.length > 0" mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
<ion-button [disabled]="!categoryForm.valid || tagList?.length > 0" type="submit" icon-only>
<ion-icon name="checkmark"></ion-icon>
</ion-button>
</ion-item>
</div>
</form>
<ion-chip class="chip" color="dark" *ngFor="let tag of tagList; let i = index">
<ion-icon name="pricetag"></ion-icon>
<ion-label class="set-label">{{ tag }}</ion-label>
<ion-icon name="close-circle" (click)="removeChip(i)"></ion-icon>
</ion-chip>
</ion-content>
<ion-footer>
<ion-button [disabled]="!tagList?.length > 0" (click)="confirm()" expand="block" type="submit">POST</ion-button>
</ion-footer>
typescript:
categoryForm: FormGroup;
...
addTag() { // properly access and reset reactive form values
const tagCtrl = this.categoryForm.get('category');
if (tagCtrl.value) {
this.tagList.push(tagCtrl.value);
this.tagInput = ''; // in order to have an empty input
}
}
ngOnInit() {
this.storage.get('image_data').then((imageFile) => {
this.imageForm.patchValue({
'image': this.storage.get('image_data')
});
});
this.categoryForm = new FormGroup({
'dual': new FormControl({lower: 100, upper: 150}),
'tag_1': new FormControl(true),
'tag_2': new FormControl(true),
'category' : new FormControl('', Validators.compose([
Validators.maxLength(25),
Validators.minLength(1),
Validators.required
])),
'image': new FormControl(null)
});
}
I have to implement swipeable segments in ionic 3 application.
I am using https://github.com/siddhartha-gupta/ionic-3-swipe-able-segments/tree/develop/src/pages directives but i am getting following error:
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [tabsList]="categories"
[ERROR ->][(currentTab)]="category"
(tabChanged)="onTabChanged($event)" class="swipe-area">
<ion-list *ngSw"):
ng:///InvitefriendPageModule/InvitefriendPage.html#60:66
Error: Template parse errors:
Can't bind to 'tabsList' since it isn't a known property of 'div'. ("
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [ERROR ->] .
[tabsList]="categories" [(currentTab)]="category"
(tabChanged)="onTabChanged($event)" class="swipe-ar"):
ng:///InvitefriendPageModule/InvitefriendPage.html#60:42
Can't bind to 'currentTab' since it isn't a known property of 'div'.
("
My code is:
In app.module.ts:
import { SwipeSegmentDirective } from '../directives/swipe- segment.directive';
#NgModule({
declarations: [
MyApp,
SwipeSegmentDirective
// ProgressBarComponent
],
In invitefriend.ts:
export class InvitefriendPage {
public category: string = 'everyone';
public categories: Array<string> = ['everyone', 'group', 'contact',
'directory']
// tab1Root: any = "EveryonePage";
// tab2Root: any = "GroupPage";
// tab3Root: any = "ContactPage";
// tab4Root: any = "DirectoryPage";
// public categories: Array<string> = ['everyone', 'group', 'contact',
'directory']
constructor(public navCtrl: NavController, public navParams:
NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad InvitefriendPage');
}
onTabChanged(tabName) {
this.category = tabName;
}
In invitefriend.html:
<ion-header>
<ion-navbar color="danger">
<ion-toolbar class="toolbar-color myToolbar">
<ion-segment [(ngModel)]="category" class="tabsSeg">
<ion-segment-button value="everyone" class="segBtn tabname
active activated">
Everyone
</ion-segment-button>
<ion-segment-button value="group" class="segBtn tabname">
Group
</ion-segment-button>
<ion-segment-button value="contact" class="segBtn tabname">
Contact
</ion-segment-button>
<ion-segment-button value="directory" class="segBtn tabname">
Directory
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-navbar>
</ion-header>
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [tabsList]="categories"
[(currentTab)]="category" (tabChanged)="onTabChanged($event)"
class="swipe-area">
<ion-list *ngSwitchCase="'everyone'">
<ion-item>
Batman Begins
</ion-item>
<ion-item>
Transporter
</ion-item>
<ion-item>
Million Dollar Baby
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'group'">
<ion-item>
Game of Thrones
</ion-item>
<ion-item>
Daredevil
</ion-item>
<ion-item>
Arrow
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'contact'">
<ion-item>
Ice Age
</ion-item>
<ion-item>
Lion King
</ion-item>
<ion-item>
Up
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'directory'">
<ion-item>
Ice Age1
</ion-item>
<ion-item>
Lion King1
</ion-item>
<ion-item>
Up1
</ion-item>
</ion-list>
</div>
</ion-content>
I need any solution to solve above error, please give here solution as soon as possible, it would be really appreciated.
I am not able to get the ng-click event to trigger when inside an item in a ionic modal that pops up. When I click on an item I see it turn gray so it seems like it is registering the click but I have a console.log statement as the first line in my joinGroup function and nothing is output to the console.
I also tried using the ion-list and ion-item elements but those didn't work either.
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-balanced">
<h1 class="title">Join Court</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Done</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<div class="item item-icon-right" ng-repeat="group in groups" ng-click="joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</div>
</div>
</ion-content>
</ion-modal-view>
var joinGroup = function (group) {
console.log("Call joinGroup");
try this
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-balanced">
<h1 class="title">Join Court</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Done</button>
</ion-header-bar>
<ion-content class="padding">
<ion-list ng-repeat="group in groups" >
<ion-item ng-click="joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-modal-view>
In your controller try to do with $scope when writing function like this.
$scope.groups = [];
$scope.joinGroup = function(){
//do your stuff here
}
I assume you did not connect your view with your controller correctly
either you have
.controller('myCtl', myCtl);
function myCtl($scope) {
$scope.groups = [];
$scope.joinGroup = function(args) {};
}
and your view
<div ng-controller="myCtl">
<ion-content class="padding">
<ion-list ng-repeat="group in groups" >
<ion-item ng-click="joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</ion-item>
</ion-list>
</ion-content>
</div>
or you can use this approach, which I prefer
.controller('myCtl', myCtl);
function myCtl() {
var vm = this;
vm.groups = [];
vm.joinGroup = function(args) {};
}
view
<div ng-controller="myCtl as vm">
<ion-content class="padding">
<ion-list ng-repeat="group in vm.groups" >
<ion-item ng-click="vm.joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</ion-item>
</ion-list>
</ion-content>
</div>
you need to define angular module and angular controller
and put the
app.controller('name',function($scope){
$scope.joinGroup = function(group){
console.log("Call joinGroup");
}
})