Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70634 articles
Browse latest View live

Ionic with HarmonyOS

$
0
0

@maalvagu wrote:

I would like to know what will happen when Huawei starts with its Harmony operating system, the applications developed in IONIC for those devices would stop working or an alternative is already contemplated, thank you very much.

Sorry if my English is not very good.

Posts: 2

Participants: 2

Read full topic


Ionic Studio - TypeError: Cannot read property 'major' of null

$
0
0

@Modern-Is wrote:

I am trying to open an Ionic project in Ionic Studio in an NX mono repo.

Unlike in the photo gallery demo project, we are using Angular 9 with Ionic 5.

When I try to open the project up in Ionic Studio using the root directory for the app (not the entire mono repo) I am getting the below error:

My file and directory structure is identical to the Ionic photo gallery demo app and the project runs successfully in my browser when running the command $ Ionic serve.

You can see my directory structure below:

Any suggestions on how to fix this, or approach fixing this would be greatly appreciated.

Thank you.

Posts: 1

Participants: 1

Read full topic

Using sentry-cordova its not sending data on device

$
0
0

@Faraon wrote:

Hi guys. I’m using sentry-cordova in order of send the data of the errorhandler of my app. When i run ionic serve its sending correctly the data and i can see it in sentry dashboard. The problem is that when i run on device i can see the request on Network but is not sending anything to sentry dashboard and the request return error.

Posts: 2

Participants: 1

Read full topic

Futur : Info : Build : Task.leftShift : deprecated

$
0
0

@jf1 wrote:

The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.

You are not concern but it could become …

Best regards

Posts: 1

Participants: 1

Read full topic

I have issue in opening menu after successfully logged in

$
0
0

@scharli wrote:

Here is my app.component.html code

<ion-menu side="start" type="overlay" class="left-menu">

  <ion-header class="head">

    <div class="enappd-header">

      <ion-avatar slot="start" class="profile" style="margin-right: auto;">

        <img src="../assets/pp.jpg"> 

        <!-- <img [src]="imgSrc"> -->

      </ion-avatar>

    </div>

  </ion-header>

  <ion-content class="app-back" scroll-y="true">

  

    <ion-list class="list-padd ion-no-margin ion-no-padding">

      <ion-list-header>

        <ion-label></ion-label>

      </ion-list-header>

      <div *ngFor="let p of beginner">

        <div *ngIf="p.children && !p.module">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div class="zero-h" [ngClass]="{'animate-expand': (showChildren == p.title)}">

            <ion-menu-toggle auto-hide="false" *ngFor="let option of p.children">

              <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"

                (click)="redirectPage(option.url, option.disabled)">

                <ion-icon slot="start" [name]="option.icon"></ion-icon>

                <ion-label>

                  {{ option.title }}

                </ion-label>

              </ion-item>

            </ion-menu-toggle>

          </div>

        </div>

        <div *ngIf="p.children && p.module=='sidemenu'">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div *ngIf="showChildren == p.title">

            <div class="option_menu-button" *ngFor="let option of p.children;let i = index">

              <ion-menu-button autoHide="false" menu="end">

                <ion-item (click)="showSidemenu(i)" class="ion-padding-start" [routerLink]="[option.url]" detail>

                  <ion-icon slot="start" [name]="option.icon"></ion-icon>

                  <ion-label>

                    {{ option.title }}

                  </ion-label>

                </ion-item>

              </ion-menu-button>

            </div>

          </div>

        </div>

        <div *ngIf="!p.children">

          <ion-menu-toggle auto-hide="false">

            <ion-item [routerLink]="[p.url]" detail>

              <ion-icon slot="start" [name]="p.icon"></ion-icon>

              <ion-label>

                {{ p.title }}

              </ion-label>

            </ion-item>

          </ion-menu-toggle>

        </div>

      </div>

      <ion-item detail (click)="logout()" class="ion-margin-top">

        <ion-icon slot="start" name="person"></ion-icon>

        <ion-label>

          Logout

        </ion-label>

      </ion-item>

    </ion-list>

    <ion-list class="list-padd ion-no-margin ion-no-padding">

      <ion-list-header>

        <ion-label></ion-label>

      </ion-list-header>

      <div *ngFor="let p of startup">

        <div *ngIf="p.children && !p.module">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div class="zero-h" [ngClass]="{'animate-expand': (showChildren == p.title)}">

            <ion-menu-toggle auto-hide="false" *ngFor="let option of p.children">

              <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"

                (click)="redirectPage(option.url, option.disabled)">

                <ion-icon slot="start" [name]="option.icon"></ion-icon>

                <ion-label>

                  {{ option.title }}

                </ion-label>

              </ion-item>

            </ion-menu-toggle>

          </div>

        </div>

        <div *ngIf="p.children && p.module=='sidemenu'">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div *ngIf="showChildren == p.title">

            <div class="option_menu-button" *ngFor="let option of p.children;let i = index">

              <ion-menu-button autoHide="false" menu="end">

                <ion-item (click)="showSidemenu(i)" class="ion-padding-start" [routerLink]="[option.url]" detail>

                  <ion-icon slot="start" [name]="option.icon"></ion-icon>

                  <ion-label>

                    {{ option.title }}

                  </ion-label>

                </ion-item>

              </ion-menu-button>

            </div>

          </div>

        </div>

        <div *ngIf="!p.children">

          <ion-menu-toggle auto-hide="false">

            <ion-item [routerLink]="[p.url]" detail>

              <ion-icon slot="start" [name]="p.icon"></ion-icon>

              <ion-label>

                {{ p.title }}

              </ion-label>

            </ion-item>

          </ion-menu-toggle>

        </div>

      </div>

    </ion-list>

    <ion-list class="list-padd ion-no-margin ion-no-padding">

      <ion-list-header>

        <ion-label></ion-label>

      </ion-list-header>

      <div *ngFor="let p of pro">

        <div *ngIf="p.children && !p.module">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div *ngIf="showChildren == p.title">

            <ion-menu-toggle class="ion-menu-toggle" auto-hide="false" *ngFor="let option of p.children">

              <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"

                (click)="redirectPage(option.url, option.disabled)">

                <ion-icon slot="start" [name]="option.icon"></ion-icon>

                <ion-label class="menu-label">

                  {{ option.title }} <ion-icon *ngIf="option.device" name="phone-portrait" color="primary">

                  </ion-icon>

                  <ion-icon *ngIf="option.apple" name="logo-apple" color="primary"></ion-icon>

                </ion-label>

              </ion-item>

            </ion-menu-toggle>

          </div>

        </div>

        

        <div *ngIf="!p.children">

          <div auto-hide="false">

            <ion-item detail [routerLink]="[p.url]">

              <ion-icon slot="start" [name]="p.icon"></ion-icon>

              <ion-label>

                {{ p.title }}

              </ion-label>

            </ion-item>

          </div>

        </div>

      </div>

    </ion-list>

  </ion-content>

</ion-menu>

<ion-router-outlet main></ion-router-outlet>

Here is my app.component.ts code

import { Component, ViewChildren,QueryList, OnDestroy } from ‘@angular/core’;

import {Platform, ModalController, MenuController , AlertController, IonRouterOutlet } from ‘@ionic/angular’;

import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;

import { StatusBar } from ‘@ionic-native/status-bar/ngx’;

import { UtilService } from ‘./services/util/util.service’;

import { Router } from ‘@angular/router’;

import { AuthenticationService } from ‘./services/firestore/firebase-authentication.service’;

import { User } from ‘…/app/models/auth.model’;

import { AuthService } from ‘./services/auth/auth.service’;

import { ToastController } from ‘@ionic/angular’;

import { Plugins } from ‘@capacitor/core’;

const { Toast } = Plugins;

@Component({

selector: ‘app-root’,

templateUrl: ‘app.component.html’,

styleUrls: [‘app.component.scss’]

})

export class AppComponent implements OnDestroy {

sidemenu = 1;

showChildren = ‘’;

backButtonSubscription;

@ViewChildren(IonRouterOutlet) routerOutlets: QueryList;

lastTimeBackPress = 0;

timePeriodToExit = 2000;

public beginner = [

{

  title: 'Home',

  url: '/home',

  icon: 'home'

},

{

  title: 'Profile',

  url: '/profile',

  icon: 'person'

},

{

  title: 'Wallet',

  url: '/wallet',

  icon: 'wallet'

},

{

  title: 'Notification',

  url: '',

  icon: 'notifications'

},

{

  title: 'Help Center',

  url: '/helpcenter',

  icon: 'help-circle'

},

{

  title: 'Legal',

  url: '/legal',

  icon: 'today'

},

{

  title: 'Refer a Friend',

  url: '',

  icon: 'contacts'

},

/* {

  title: 'Video',

  url: '/video',

  icon: ''

}, */

];

public startup = [

];

public pro = [

];

imgSrc: string;

selectedImage: any = null;

isSubmitted: boolean;

isUpdateDateError : boolean = false;

emailPattern = “^[a-z0-9._%±]+@[a-z0-9.-]+.[a-z]{2,4}$”;

user: User;

em: any;

fnm: any;

lnm: any;

mob: any;

gn: any;

constructor(

private authservices: AuthService,

private authService: AuthenticationService,

 private util: UtilService,

  private route: Router,

   private platform: Platform,

 private splashScreen: SplashScreen,

  private statusBar: StatusBar,

   public modalCtrl: ModalController,

   private menuCtrl: MenuController,

   

   public alertController: AlertController,

   public router: Router,

   ) 

{

this.initializeApp();

}

ngOnInit() {

this.authservices.getUserClaims().subscribe((res: any) => {      

this.em = res.Email;

this.fnm = res.FirstName;

this.lnm = res.LastName;

this.gn = res.Gender;

this.mob = res.MobileNo;

this.imgSrc = res.Profile_Path;   

});

}

logout() {

console.log('logout item');

this.authService.logout().then(() => {

  this.util.navigate('login', false);

})

}

initializeApp() {

this.platform.ready().then(() => {

  this.statusBar.styleDefault();

  // this.splashScreen.hide();

  this.backButtonEvent();

  this.splashScreen.hide();

});

}

backButtonEvent() {

this.backButtonSubscription = this.platform.backButton.subscribe(async () => {

  this.routerOutlets.forEach((outlet: IonRouterOutlet) => {

    if (outlet && outlet.canGoBack()) {

      outlet.pop();

    } else if (this.router.url === "/home") {

      // this.presentAlertConfirm();

      if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {

        navigator['app'].exitApp();

      } else {

        this.showToast('Press back again to exit App.');

        this.lastTimeBackPress = new Date().getTime();

      }

    }

  });

});

}

async showToast(msg) {

await Toast.show({

  text: msg

});

}

async presentAlertConfirm() {

const alert = await this.alertController.create({

  header: 'Confirm!',

  message: 'Confirm to Exit App !!!',

  buttons: [

    {

      text: 'Cancel',

      role: 'cancel',

      cssClass: 'secondary',

      handler: (blah) => {

        console.log('Confirm Cancel: blah');

      }

    }, {

      text: 'Exit',

      handler: () => {

        console.log('Confirm Okay');

        navigator["app"].exitApp();

      }

    }

  ]

});

await alert.present();

}

//Called when view is left

ngOnDestroy() {

// Unregister the custom back button action for this page

this.backButtonSubscription.unsubscribe();

}

showSidemenu(index) {

this.sidemenu = index + 1;

}

expandMenu(title) {

if (this.showChildren === title) {

  this.showChildren = '';

} else {

  this.showChildren = title;

}

}

async redirectPage(pageUrl, disabled) {

if (disabled) {

  return

}

if (pageUrl === '/logout') {

  this.logout();

} else if (pageUrl === '/product-details') {

  this.route.navigate([pageUrl, { id: 65 }]);

} else {

  this.route.navigate([pageUrl])

}

}

async proRedirect(pageUrl) {

this.route.navigate([pageUrl])

this.menuCtrl.toggle();

}

}


Please someone help i have been trying different types of codes for menu but nothing resolve my menu error
It’s not opening after log in if i refresh browser it’ll work perfectly.

Posts: 1

Participants: 1

Read full topic

Bad compression on iOS using ionic native camera

$
0
0

@staticbuzz wrote:

Our app makes use of ionic native camera / cordova-plugin-camera and we have found that on Android we get a compressed image size of around 60kb but the same for iOS is about 500kb. Has anyone else encountered this situation? Any suggestions on how to fix this or where to report it? Any help appreciated!!
Thanks

Posts: 1

Participants: 1

Read full topic

Can't add stickers to whatsapp

Ngx document viewer not working with ionic 3

$
0
0

@Abhishek91 wrote:

ngx-doc-viewer@error coming when page load

Error: Uncaught (in promise): TypeError: Object(…) is not a function
TypeError: Object(…) is not a function
at http://localhost:8100/build/vendor.js:360494:103
at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
at r.run (http://localhost:8100/build/polyfills.js:3:10143)
at NgZone.runOutsideAngular (http://localhost:8100/build/vendor.js:5034:69)
at NgxDocViewerComponent.ngAfterViewInit (http://localhost:8100/build/vendor.js:360490:25)
at callProviderLifecycles (http://localhost:8100/build/vendor.js:13074:18)
at callElementProvidersLifecycles (http://localhost:8100/build/vendor.js:13041:13)
at callLifecycleHooksChildrenFirst (http://localhost:8100/build/vendor.js:13024:29)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14179:5)
at callViewAction (http://localhost:8100/build/vendor.js:14521:21)
at c (http://localhost:8100/build/polyfills.js:3:19752)
at Object.reject (http://localhost:8100/build/polyfills.js:3:19174)
at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:89849:16)
at NavControllerBase._failed (http://localhost:8100/build/vendor.js:89842:14)
at http://localhost:8100/build/vendor.js:89889:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
at Object.onInvoke (http://localhost:8100/build/vendor.js:5086:33)
at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
at r.run (http://localhost:8100/build/polyfills.js:3:10143)
at http://localhost:8100/build/polyfills.js:3:20242

Posts: 1

Participants: 1

Read full topic


Cannot Build Android APK - IONIC 4

$
0
0

@pamzz wrote:

I has installed jdk 8 and latest android studio, gradle and i also set environment variable for java_home ,android_home,gradle_home but showing this error

Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=C:\Users\A-11\AppData\Local\Android\Sdk (DEPRECATED)
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
[ERROR] An error occurred while running subprocess cordova.

    cordova.cmd build android exited with exit code 1.

    Re-running this command with the --verbose flag may provide more information.

i cannot build the android apk, Any one help…

Posts: 1

Participants: 1

Read full topic

ERROR TypeError: Cannot read property 'then' of undefined while saving contact in IONIC 4

$
0
0

@UnnatiPatadia wrote:

I want to save the contact to my phone book.
I followed the instructions at https://ionicframework.com/docs/native/contacts

Plugins I added :

ionic cordova plugin add call-number
npm install @ionic-native/call-number 
ionic cordova plugin add cordova-plugin-contacts
npm install @ionic-native/contacts

detail.html

<div class="call">
    <ion-buttons slot="primary">
        <ion-button size="small" (click)="save(memberData.contact_no,memberData.fname,memberData.lname)">
             Save Contact
             <ion-icon slot="end" name="phone-portrait"></ion-icon>
        </ion-button>
    </ion-buttons>
</div>

detail.ts


constructor(private contacts: Contacts) { }

save(number: string, firstName: string, lastName: string) {
    // alert(number + " " + firstName + " " + lastName);

    let contact: Contact = this.contacts.create();

    contact.name = new ContactName(null, firstName, lastName);
    contact.phoneNumbers = [new ContactField('mobile', number)];
    contact.save()
    .then(() => console.log('Contact saved!', contact),
      (error: any) => console.error('Error saving contact.', error))
    .catch(err => console.log('Catch : Error saving contact', err));
  } 

Error

common.js:290 Native: tried calling Contacts.create, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

MemberDetailPage.html:17 ERROR TypeError: Cannot read property ‘then’ of undefined

error

Posts: 1

Participants: 1

Read full topic

Ionic 5 - ion-input and clear-input

$
0
0

@andyhb wrote:

Am I looking in the wrong place for the latest Ionic 5 documentation, nothing seems to correlate or is Ionic 5 not working as it should, an example would be: -

<ion-input> and the clear-input attribute, I have tried setting this and nothing happens??

Posts: 1

Participants: 1

Read full topic

Capturing key input to hidden input

$
0
0

@Vartex05 wrote:

Hi, iam working on an app, which i need to use on terminal with laser barcode scanner. Problem is, that i cant acces laser barcode scanner with default barcode plugin and iam not a java programmer, so iam not able to write cordova plugin myself.
A think of a possible workaround - scanner can be configured to send the scanned data as focus or keyboard input. My idea was, that i will create hidden input in home page of my app, and i will focus it. Then when i scan barcode, it will go to hidden input, where i can get it with onChange listener. Any ideas how to implement this?

i tried it with template variable and viewChild, but i was not able to get it work. Is there a way to do this? Or can i listen to keyboard input globally and filter it somehow?

here are snippets of my code:
template:

  <ion-input #hiddenInput autofocus="true" type="hidden" (ionChange)="inputChanged($event)"></ion-input>
  <ion-button (click)="focusHidden()">
    focus hidden
  </ion-button>

ts file:

export class HomePage implements OnInit {
  @ViewChild("hiddenInput", { static: true }) hiddenInput: any;
  
inputChanged(event) {
    console.log(event);
  }

  focusHidden() {
    console.log(this.hiddenInput);
    this.hiddenInput.setFocus();
  }
}

Posts: 1

Participants: 1

Read full topic

Is it possible to add a breakpoint on Chrome?

$
0
0

@ioclaudio wrote:

Hi,
is it possible to debug an Ionic4 app on Chrome?
Should I start the app with a specific parameter?
Because I can’t see in Chrome the Typescript source file of the shown page.

ScreenHunter_673 Feb. 28 12.15

Thank you very much

Claudio

Posts: 2

Participants: 2

Read full topic

Using leafletjs in an Ionic React app

$
0
0

@robinkeith wrote:

Has anybody used leafletjs (or another opensource mapping component) in Ionic React? I’m putting a simple map together. I guess the starting point is leaflet-react but would be great to know what other people have done.
Thanks
Robin

Posts: 1

Participants: 1

Read full topic

Ionic MatchParent?

$
0
0

@MrMike wrote:

I wanted to know if there is any options on Ionic to work as you would do on Android with MatchParent for elements height, and then something that allows us to distribute childs inside this parent by weight.

I guess I could use CSS 100vh for the parent and then different values adding to 100 for the childs, but, is there something already available to us to do this job?

Thanks a lot.

Posts: 1

Participants: 1

Read full topic


How to get directory for upload file in file picker ionic 3 ios?

$
0
0

@FahrilPratama wrote:

Halo
I want to get directory after i get file by file picker on ios

and i got error like this :
image

this is my code :

this.filePicker.pickFile().then(uri => {
        console.log(uri);
        this.file.resolveDirectoryUrl(uri).then((response: any) => {
          console.log(response)
          response.file((file) => {
            var maxSize = 1048576 * 2;
            var size = file.size;
            var sizeCheck = size < maxSize;
            if (sizeCheck == false) {
              this.service.showAlert('Warning', 'Failed, Max file size is 2 Mb');
            } else {
              console.log(file)
            }
          })
        }).catch(e => console.log(e));

and this is my ionic info:
Ionic:

Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.5
@ionic/app-scripts : 3.2.2

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)

Utility:

cordova-res (update available: 0.9.0) : 0.8.1
native-run (update available: 0.3.0) : 0.2.9

System:

ios-sim : 8.0.2
NodeJS : v12.16.1 (/usr/local/bin/node)
npm : 6.13.4
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C504

Thank you for helping

Posts: 1

Participants: 1

Read full topic

Ng has unexpectedly closed (exit code 1)

$
0
0

@Adarsh-Bellary wrote:

ng has unexpectedly closed (exit code 1).

ng.cmd run app:serve --host=localhost --port=8100
[ng] The run command requires to be run in an Angular project, but a project definition could not be found.

[ERROR] ng has unexpectedly closed (exit code 1).

    The Ionic CLI will exit. Please check any output above for error details

Posts: 1

Participants: 1

Read full topic

Ionic 4: ion-select is not working in devices with android 5 and below

$
0
0

@feliperiverot wrote:

0

I am working in an app using ionic 4 and angular.

I created a form which contain a ion-select component.

Code:

<ion-item>
    <ion-label class="ultraipunt">Pais</ion-label>
    <ion-select formControlName="pais">

      <ion-select-option value="Venezuela">Venezuela</ion-select-option>
      <ion-select-option value="Peru">Peru</ion-select-option>
      <ion-select-option value="Ecuador">Ecuador</ion-select-option>
      <ion-select-option value="Chile">Chile</ion-select-option>



    </ion-select>
  </ion-item>

And this is how it looks in a device with android 9:

enter image description here

But when I tested the app in devices with android 5 and below, doesnt work the ion-select component. The select box not appear and the user cannot select a country.

What can i do?

This is my ionic specifications:

enter image description here

And I build the app with android sdk 8:

enter image description here

Posts: 1

Participants: 1

Read full topic

Async data to child page with Ionic5

$
0
0

@arcanjo42 wrote:

I’m trying to pass data between a parent and a child page in ionic using Ionic Storage to get the data in an async way.

What is happening is that when I get to the page, the data didn’t return from the storage yet and I have an undefined error: ERROR TypeError: Cannot read property ‘name’ of undefined.

What I am using:

  • A parent page that I click in an item in the grid and it forwards me to the child page, using router.navigate
  goToMediaDetails(data) {
    this.router.navigate([`slate-list/${data.id}`]);
  }
  • The child route is listed in the app-routing.module.ts receiving the id
  {
    path: "slate-list/:mediaId",
    loadChildren: () =>
      import("./pages/slate-list/slate-list.module").then(
        m => m.SlateListPageModule
      )
  }
  • I grab the mediaId in the child’s constructor page and use a service to get the data from ionic storage.
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";

//Services
import { MediaService } from "../../services/media.service";

@Component({
  selector: "app-slate-list",
  templateUrl: "./slate-list.page.html",
  styleUrls: ["./slate-list.page.scss"]
})
export class SlateListPage implements OnInit {
  public media: any;
  private mediaId: number;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private mediaSvc: MediaService
  ) {
    //if the id is provided in the url, get the media by id using the service
    if (route.snapshot.params.mediaId) {
      this.mediaId = route.snapshot.params.mediaId;
      this.mediaSvc.getMediaById(this.mediaId).then(result => {
        this.media = result;
      });
    }
  }
  • Here is the service code returning a promise
  //GET Media By ID
  getMediaById(mediaId) {
    let mediaToReturn = new Media();
    return new Promise(resolve => {
      this.storage.get("media").then(result => {
        if (result != null && result.length != 0) {
          mediaToReturn = result.find(x => x.id == mediaId);
        }

        resolve(mediaToReturn);
      });
    });
  }
  • Here is the simple html giving the problem
<ion-content>
  <ion-grid class="ion-no-padding">
    <ion-row>
      Slates for <strong>{{media.name}} </strong> / Episode: {{media.episode}}
    </ion-row>
  </ion-grid>
</ion-content>

Yes, the data is returned using the service, I console.log it right after the .then and the data is there, so I’m assuming that it’s just a classic async situation.

I saw I can introduce a loading component, make it show up for 1 second or a bit more and then the data will be there but is that the better/official way to do it?

I’m at the beginning of my journey with ionic/async so forgive me if I made some silly mistake

Posts: 1

Participants: 1

Read full topic

ionic cordova build ios Error: spawn EPERM ionic 3

$
0
0

@Zeeedds wrote:

I get this error when i try ionic cordova build ios

Error: spawn EPERM

at ChildProcess.spawn (internal/child_process.js:313:11)
at Object.exports.spawn (child_process.js:503:9)
at spawn (/usr/local/lib/node_modules/ionic/node_modules/cross-spawn/index.js:12:24)
at spawn (/usr/local/lib/node_modules/ionic/node_modules/@ionic/cli-framework/utils/shell.js:136:12)
at ShellCommand.spawn (/usr/local/lib/node_modules/ionic/node_modules/@ionic/cli-framework/utils/shell.js:125:16)
at ShellCommand.run (/usr/local/lib/node_modules/ionic/node_modules/@ionic/cli-framework/utils/shell.js:87:24)
at Shell.<anonymous> (/usr/local/lib/node_modules/ionic/lib/shell.js:34:37)
at Generator.next (<anonymous>)
at fulfilled (/usr/local/lib/node_modules/ionic/node_modules/tslib/tslib.js:104:62)
at <anonymous>

Posts: 1

Participants: 1

Read full topic

Viewing all 70634 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>