ionic3

Selected Tab in Ionic framework

Deadly 提交于 2021-01-29 06:21:22
问题 I want to display two tabs that will be used to display similar data, but the tabs will be used to filter the information. My Tabs: import { Component } from '@angular/core'; import { DataPage } from './DataPage'; @Component({ template: ` <ion-tabs> <ion-tab tabIcon="heart" [root]="tab1"></ion-tab> <ion-tab tabIcon="star" [root]="tab2"></ion-tab> </ion-tabs>` }) class MyApp { tab1: any; tab2: any; constructor() { this.tab1 = DataPage; this.tab2 = DataPage; } } The page: import { Component }

Ion-select doesn't scroll in Ionic 3

南楼画角 提交于 2021-01-28 21:31:46
问题 This select contains the list of all countries in register form. The point is that the ion-content in the form page is scrollable but select it self is not scrolling. Here is the code: <ion-item> <ion-select interface="action-sheet" class="select" placeholder="Country"> <ion-option ngDefaultControl [value]='country.name' *ngFor="let country of countries">{{country.name}} </ion-option> </ion-select> </ion-item> Why select scroll is not working? 回答1: This is a known issue, you can track at

Ionic native device plugin @ionic-native/device returns all nulls

北战南征 提交于 2021-01-28 08:51:51
问题 I need to do a device detection in my Ionic project so I've installed @ionic-native/device plugin per instructions here: https://ionicframework.com/docs/native/device/ However when I wire it in inside of a component, then run ionic serve to preview changes, console.log returns Device object with all values set to null , same happens when I try to use individual property e.g. this.device.model : Here is how I use it inside of a component: import {Device} from "@ionic-native/device"; // ...

Blank page with google maps and Ionic 3

牧云@^-^@ 提交于 2021-01-28 06:40:48
问题 Googlemaps displays a white page in Ionic 3 on browser and mobile. I have installed the plugin correctly and imported everything. When testing it prompts me to allow location then displays a white page without even a Google logo. I have tried reinstalling all plugins and checking the API key, all seems valid. .html <ion-content padding> <div #map id="map"></div> </ion-content> .module.ts import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import {

Ionic3 ion-img do not show images with ng-for

旧时模样 提交于 2021-01-28 06:13:26
问题 I am trying to show the dynamic images with loop using ion-img but it is not working. <ion-item no-lines no-padding *ngFor="let company of shortedDistanceArray"> <div> <ion-img style="width: 15vh;height: 12vh;" src={{company.images}}"></ion-img> </div> </ion-item> 回答1: Here you need to use property binding as shown below. Always try to avoid string interpolation . <ion-item no-lines no-padding *ngFor="let company of shortedDistanceArray"> <div> <img style="width: 15vh;height: 12vh;" [src]=

Ionic Increment Firestore Value

微笑、不失礼 提交于 2021-01-28 05:48:36
问题 I was wondering if there was a way to increment a value in Firestore with Ionic. For example, a like button and when clicked a field value 'likes' adds +1 onto the existing value. I saw examples with 'transactions' where this is done but it was with the Realtime Database rather than the Cloud Firestore. I looked further and could not find any documentation regarding Firestore. Is there anyway to pull this off without pulling the existing value from the snapshot first? Thanks, Troy 回答1: There

How can I resolve Ionic Uncaught Error: Cannot find module “.” when adding new page?

狂风中的少年 提交于 2021-01-27 13:10:57
问题 Uncaught Error: Cannot find module "." at webpackMissingModule (index.js:3) at e.code (index.js:3) at Object.<anonymous> (index.js:9) at __webpack_require__ (bootstrap ee3a374a94c4cd74e2a6:54) at Object.256 (main.ts:5) at __webpack_require__ (bootstrap ee3a374a94c4cd74e2a6:54) at Object.233 (main.js:412) at __webpack_require__ (bootstrap ee3a374a94c4cd74e2a6:54) at webpackJsonpCallback (bootstrap ee3a374a94c4cd74e2a6:25) at main.js:1 Before adding new bookmarks pages in app, the app working

A problem occurred configuring project ':CordovaLib'

偶尔善良 提交于 2021-01-27 12:50:44
问题 BUILD FAILED in 3s cmd: Command failed with exit code 1 Error output: FAILURE: Build failed with an exception. What went wrong: A problem occurred configuring project 'CordovaLib'. No toolchains found in the NDK toolchains folder for ABI with pref Try: Run with --stacktrace option to get the stack trace. Run with --infout . Get more help at https://help.gradle.org BUILD FAILED in 3s [ERROR] An error occurred while running subprocess Cordova. cordova build android exited with exit code 1. Re

How to set a maximum value for `ion-range`?

丶灬走出姿态 提交于 2021-01-05 21:09:52
问题 I have the following ion-range component. I set the minimum and maximum values to 0 and 120 respectively. But also I want to restrict the movement of the thumb to a lower value than 120 (upper limit), for example: 85 but keeping the previous limits: 0 and 120 . <ion-list> <ion-item> <ion-range min="0" max="120" pin="true" [(ngModel)]="myValue"></ion-range> </ion-item> </ion-list> Example: Any idea on how to achieve this? Thanks! 回答1: I had encountered this same issue and have a quick fix! You

How to set a maximum value for `ion-range`?

点点圈 提交于 2021-01-05 21:08:45
问题 I have the following ion-range component. I set the minimum and maximum values to 0 and 120 respectively. But also I want to restrict the movement of the thumb to a lower value than 120 (upper limit), for example: 85 but keeping the previous limits: 0 and 120 . <ion-list> <ion-item> <ion-range min="0" max="120" pin="true" [(ngModel)]="myValue"></ion-range> </ion-item> </ion-list> Example: Any idea on how to achieve this? Thanks! 回答1: I had encountered this same issue and have a quick fix! You