标签: ionic2

如何在IONIC 3中的离子项部分内显示两个离子场

我需要在一行中显示两个输入字段,如下所示:

在此输入图像描述

但是当我使用时:

<ion-list>
<ion-item>
  <ion-label stacked> Phone Number</ion-label>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-input type="tel" placeholder="Area code"></ion-input>
      </ion-col>
      <ion-col>
        <ion-input type="tel" placeholder="Number"></ion-input>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>
Run Code Online (Sandbox Code Playgroud)

但它没有显示任何屏幕像:

在此输入图像描述

请帮我.

cordova typescript ionic2 ionic3 angular

3
推荐指数
1
解决办法
5649
查看次数

导航堆栈至少需要一个根页面

当我打电话时this.navCtrl.popAll();,我收到此错误:

错误:未捕获(在承诺中):导航堆栈至少需要一个根页面

但根页面设置为app.component.ts:

rootPage = LandingPage;
Run Code Online (Sandbox Code Playgroud)

什么仍然缺少?

navigation ionic2

3
推荐指数
1
解决办法
1万
查看次数

ionic 3 Build任务失败:processDebugManifest

我在构建我的离子3应用程序时遇到了麻烦.每次我尝试构建Android应用程序时都会出现以下错误.

* What went wrong:
Execution failed for task ':processDebugManifest'.
> Manifest merger failed : Attribute meta-data#android.support.VERSION@value val
ue=(25.3.1) from [com.android.support:appcompat-v7:25.3.1] AndroidManifest.xml:2
7:9-31
        is also present at [com.android.support:support-v4:26.0.0-alpha1] Androi
dManifest.xml:27:9-38 value=(26.0.0-alpha1).
        Suggestion: add 'tools:replace="android:value"' to <meta-data> element a
t AndroidManifest.xml:25:5-27:34 to override.
Run Code Online (Sandbox Code Playgroud)

我的离子信息如下:

cli包:(C:\ Users\SystemOne\AppData\Roaming \npm \node_modules)

@ionic/cli-utils  : 1.18.0
ionic (Ionic CLI) : 3.18.0
Run Code Online (Sandbox Code Playgroud)

全球套餐:

cordova (Cordova CLI) : 6.5.0
Run Code Online (Sandbox Code Playgroud)

本地包裹:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.7.1
Run Code Online (Sandbox Code Playgroud)

系统:

Node : v6.10.0
npm  : …
Run Code Online (Sandbox Code Playgroud)

cordova ionic2 ionic3 angular

3
推荐指数
1
解决办法
3401
查看次数

问题"离子cordova build android --prod --release"

我使用Ionic2创建了一个聊天应用程序.当我尝试使用生产构建时ionic cordova build android --prod --release,我收到以下错误.

    Error: ./node_modules/rxjs/observable/BoundCallbackObservable.js
Module build failed: TypeError: Cannot read property 'type' of undefined
    at Object.getEffectiveTypeAnnotationNode (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:9341:17)
    at assignContextualParameterTypes (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:41652:25)
    at checkFunctionExpressionOrObjectLiteralMethod (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:41948:29)
    at checkExpressionWorker (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:42959:28)
    at checkExpression (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:42898:42)
    at checkExpressionCached (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:42779:38)
    at checkReturnStatement (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:45418:54)
    at checkSourceElement (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:46763:28)
    at Object.forEach (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:1506:30)
    at checkBlock (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:44563:16)
 @ ./node_modules/rxjs/observable/bindCallback.js 2:32-68
 @ ./node_modules/rxjs/add/observable/bindCallback.js
 @ ./node_modules/rxjs/Rx.js
 @ ./src/providers/apis/apis.ts
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts,./node_modules/rxjs/observable/BoundNodeCallbackObservable.js
Module build failed: TypeError: Cannot read property 'type' of undefined
    at Object.getEffectiveTypeAnnotationNode (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:9341:17)
    at assignContextualParameterTypes (C:\Users\cool\Desktop\Chat\SideMenu\node_modules\typescript\lib\typescript.js:41652:25)
    at …
Run Code Online (Sandbox Code Playgroud)

deployment observable typescript ionic2 angular

3
推荐指数
1
解决办法
651
查看次数

如何在键入时垂直自动调整离子输入字段

当我输入长文本时,该ion-input字段保持在相同的高度,我只能看到可用可见区域中的文本.在输入时,我希望输入字段根据其中的数据垂直自动调整为2行或3行.

我的page.html代码:

  <ion-item>
    <ion-input placeholder="type message here"></ion-input>
  </ion-item>
Run Code Online (Sandbox Code Playgroud)

我附上截图以更清楚地说明我要解释的内容:

在此输入图像描述

感谢您的时间和无价的支持.

typescript ionic2 ionic3 angular

3
推荐指数
1
解决办法
3896
查看次数

错误:对于新创建的应用程序,在离子服务上发生读取ECONNRESET

我刚刚创建了一个离子3应用程序.当我执行时ionic serve,它运行成功但是当我在项目中的任何文件上更改某些内容时,我更改了文本"欢迎使用Ionic",serve中断并抛出以下错误.

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at exports._errnoException (util.js:1026:11)
    at TCP.onread (net.js:569:26)
Run Code Online (Sandbox Code Playgroud)

我的离子细节是

cli packages: (C:\Users\Imdad Turi\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.18.0
ionic (Ionic CLI) : 3.18.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.1.5
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.3
Node              : v6.9.1
npm               : 4.6.1
OS                : Windows 8.1

Environment Variables:

ANDROID_HOME : C:\Users\Public

Misc:

backend …
Run Code Online (Sandbox Code Playgroud)

cordova hybrid-mobile-app ionic-framework ionic2

3
推荐指数
2
解决办法
2026
查看次数

Angular 2 Inheritance启用禁用离子菜单滑动

我的问题:

我的应用程序包含一个启用滑动的菜单.在登录屏幕上,如果我滑动,我可以看到不正确的菜单.我想对不包含菜单图标的页面禁用菜单滑动,例如登录,包含后退按钮的内部详细信息页面等.

解决方案:

我可以通过关注SO链接来做到这一点 - /sf/answers/2705825111/

我创建了一个基类并在其中注入了一个菜单对象.覆盖ionViewDidEnter()和ionViewDidLeave()在子类中,我继承了基类.我必须super()在派生类构造函数中编写调用,并将菜单对象传递回超类.

是他们用这种方式做任何其他方式我必须在每一页都这样做.

请检查以下代码片段:

基类

import { MenuController } from "ionic-angular";

export class BaseComponent {
    constructor(public menu: MenuController) {

    }

    ionViewDidEnter() {
        this.menu.swipeEnable(false);
    }

    ionViewDidLeave() {
        this.menu.swipeEnable(true);
    }
}
Run Code Online (Sandbox Code Playgroud)

派生类

import { Component } from '@angular/core';
import { NavController, LoadingController, Events, MenuController } from 'ionic-angular';


@Component({
        selector: 'login',
        templateUrl: 'login.component.html'
    })

export class login extends BaseComponent {
    constructor(public menu: MenuController) {
        super(menu)
    }
}
Run Code Online (Sandbox Code Playgroud)

typescript ionic-framework ionic2 ionic3 angular

3
推荐指数
1
解决办法
1548
查看次数

Base64插件无法正常工作

直到最近我开始遇到插件问题,该插件才能正常工作,该代码无法执行,也不会引发错误。我想从相机捕获图像并将base64字符串发送到服务器,这很容易,因为我可以直接获取base64捕获图像的图像,但是随后我使用了本地作物,该作物返回了URI图像的图像。因此,现在我必须获取base64此图片的,但是该Base64插件不再起作用。任何解决方法或帮助都非常感谢。我使用的代码:

this.base64.encodeFile(filePath).then((base64File: string) => {
    console.log(base64File);    // Won't execute
}, (err) => {
    console.log(err);  // Won't execute
});
Run Code Online (Sandbox Code Playgroud)

cordova ionic-framework cordova-plugins ionic2 ionic3

3
推荐指数
1
解决办法
1838
查看次数

TypeError:无法读取未定义的属性“控件”

我正在使用Ionic 2表单控件,只想验证表单。我收到此错误“ TypeError:无法读取未定义的属性'控件'”。

这是我的.html页面

<ion-header>
  <ion-navbar>
    <ion-row align-items-center>
      <!-- <ion-col col2 align-items-center>
        <ion-icon name="person" item-left></ion-icon>
      </ion-col> -->
      <ion-col col-12 align-items-center>
        <h1>Personal Details</h1>
      </ion-col>
    </ion-row>
  </ion-navbar>
</ion-header>

<ion-content padding>  
<form class="spacingafterlogo" [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)">
  <ion-item>
    <ion-label>Full Name:</ion-label>
    <ion-input [formControl]="username"  ([ngModel])="userName" placeholder=""></ion-input>
  </ion-item>
  <!-- <ion-item>
    <ion-label>Birth Date:</ion-label>
    <ion-input  [formControl]="dob"   ([ngModel])="userDob"  placeholder=""></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Gender:</ion-label>
    <ion-input  [formControl]="gender"   ([ngModel])="userGender"  placeholder=""></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Email Id:</ion-label>
    <ion-input  [formControl]="email"  ([ngModel])="userEmail" type="email" placeholder=""></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Mobile:</ion-label>
    <ion-input max="10"  [formControl]="mobiile" ([ngModel])="userPhone"  type="number" placeholder="Let's get in touch"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Address:</ion-label>
    <ion-textarea …
Run Code Online (Sandbox Code Playgroud)

ionic2 angular

3
推荐指数
1
解决办法
2万
查看次数

警报消息上的新行

无论如何,在Ionic 3中使用警报显示新行吗?

我应该用'\ n'代替什么?

doFinalise() {
let confirm = this.alertCtrl.create({
  title: 'Are you sure?',
  message: 'Are these details correct?\n Price ($/L): \n KMs Done: \n Total Spent: \n Fuel Type: \n Date: ',
  buttons: [ etc...
Run Code Online (Sandbox Code Playgroud)

最终,该消息将在新行之前显示变量,但是在此阶段不需要。

ionic2 ionic3

3
推荐指数
1
解决办法
2100
查看次数