标签: ionic2

离子2 DatePicker

我是离子新手,我正在玩离子2 beta.我正在尝试使用cordova插件实现本机日期选择器,如文档中所示.

我完全复制/粘贴了这个例子,我"ReferenceError: DatePicker is not defined上了Nexus 5 Emulator和Archos安卓手机.

openDatePicker() {
    var options = {
      date: new Date(),
      mode: 'date'
    };

    function onSuccess(date) {
        alert('Selected date: ' + date);
    }

    function onError(error) { // Android only
        alert('Error: ' + error);
    }

    DatePicker.show(options, onSuccess, onError);
  }
Run Code Online (Sandbox Code Playgroud)

我已经搜索了很多但没有发现这个,也许我在Ionic 2上使用cordova插件做错了?

cordova ionic2

6
推荐指数
1
解决办法
7490
查看次数

在Ionic 2中使用非离子原生插件

我正在使用自定义cordova插件(https://github.com/VJAI/simple-crypto),不适用于离子原生.

我正在使用Ionic 2并使用以下命令安装了插件: cordova plugin add https://github.com/VJAI/simple-crypto

界面是这样的:

var rncryptor = cordova.require("com.disusered.simplecrypto.SimpleCrypto");

rncryptor.encrypt(key, data, successCallback, failureCallback)
rncryptor.decrypt(key, data, successCallback, failureCallback)`
Run Code Online (Sandbox Code Playgroud)

方法1:
我试图使用调用插件

window.plugins.SimpleCrypto.encrypt(...)
Run Code Online (Sandbox Code Playgroud)

但是当我跑步时ionic serve,我得到错误:

TypeError:无法读取未定义的属性"SimpleCrypto"

方法2:
我尝试的另一种方式是

cordova.plugins.SimpleCrypto.encrypt(...)
Run Code Online (Sandbox Code Playgroud)

我得到的错误是

ReferenceError:未定义cordova

有办法绕过这个吗?

cordova ionic-framework ionic2 angular

6
推荐指数
1
解决办法
2343
查看次数

Ionic 2 - 侧面菜单,页面之间有导航(后退按钮)

我是混合应用程序开发的新手.首先,我想知道是否可以使用Ionic 2中的侧面菜单在页面之间进行导航.我能够实现本教程中显示的页面之间的导航以及ionicdocs站点中显示的菜单.但是当我点击一个菜单项时,菜单将页面设置为"rootPage",所以我被重定向到那个页面,但是如果我想回到主页我必须通过菜单这样做,我会喜欢只按一个后退按钮.

在此先感谢,这是我的app.ts文件:

import {App, IonicApp, Platform, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {CategoriesPage} from './pages/categories/categories';

@App({
  template: `
<ion-menu [content]="content">
<ion-toolbar>
    <ion-title>Menu</ion-title>
</ion-toolbar>

<ion-content>
    <ion-list>
        <button ion-item (click)="openPage(categoriesPage)">
            Categorías
        </button>
        <button ion-item>
            Mis Compras
        </button>
        <button ion-item>
            Lista de Deseos
        </button>
        <button ion-item>
            Cerrar Sesión
        </button>
    </ion-list>
</ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>`,
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  public rootPage;
  public app;
  public menu;
  public …
Run Code Online (Sandbox Code Playgroud)

typescript ionic-framework ionic2 angular

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

升级Firebase期间的UpdateProfile()

我正在开发一个应用程序,我想实现这一目标。当用户登录时,我想获取其用户名并存储在firebase中。所以我创建了这个:

Signup(email: string, password: string, displayName: string) {
    this.angFire.auth.createUser({
      email: email,
      password: password
    }).catch(
      (err) => {
        console.log(err);
        this.error = err;
      })
...
Run Code Online (Sandbox Code Playgroud)

并且这可行,现在我还需要将displayName保存到当前用户中,因此我尝试在同一函数(Singup())中执行此操作:

let user = firebase.auth().currentUser;
    user.updateProfile({
      displayName: this.displayName,
      photoURL: "https://example.com/jane-q-user/profile.jpg"
    }).then(function() {
      console.log("Nome utente inserito");
    }, function(error) {
      console.log("Errore durante inserimento utente");
    });
Run Code Online (Sandbox Code Playgroud)

但这给了我这个:

error_handler.js:54 EXCEPTION: Error in ./SignupPage class SignupPage - inline template:70:4 caused by: Cannot read property 'updateProfile' of null
Run Code Online (Sandbox Code Playgroud)

怎么做?我在ionic 2 angular2,firebase / angulrfire上运行

文档参考:

更新用户资料

您可以使用updateProfile方法更新用户的基本个人资料信息(用户的显示名称和个人资料照片URL)。例如:

var user = firebase.auth()。currentUser;

user.updateProfile({显示名: “简问用户”,photoURL: “ …

firebase angularfire firebase-authentication ionic2 angular

6
推荐指数
1
解决办法
754
查看次数

registerBackButtonAction,Ionic2,用于不同的页面

我正在开发一个Ionic2应用程序.我对registerBackButtonAction功能感到困惑.

我在一个页面上做了这个(比如pageA).它按预期工作.

this.platform.registerBackButtonAction(() => {
     console.log("back presed");
    this.abortDownloadAndExit();
    });
Run Code Online (Sandbox Code Playgroud)

现在我想registerBackButtonAction在其他页面上做一些其他操作(比如PageB).但Ionic正在从pageA采取行动

如何在不同页面上注册不同的作品.

typescript ionic-framework ionic2 ionic3 angular

6
推荐指数
1
解决办法
5797
查看次数

离子2:设定间隔

我尝试在.ts文件中设置一个间隔,但我不明白如何在间隔中的同一文件中使用一个函数.

解释 :

我的间隔设置:

this.task = setInterval(function () {
            this.refreshData();
        }, 300);
Run Code Online (Sandbox Code Playgroud)

我的功能在同一个ts文件中:

refreshData() : void{
        console.log('update...');
    }
Run Code Online (Sandbox Code Playgroud)

当我在我的设备上运行时,我有这个错误:

04-19 10:38:57.535 21374-21374/com.ionicframework.app722890 I/chromium: [INFO:CONSOLE(79432)] "TypeError: this.refreshData is not a function
                                                                                      at file:///android_asset/www/build/main.js:10987:18
                                                                                      at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:10284)
                                                                                      at Object.onInvokeTask (file:///android_asset/www/build/main.js:39626:37)
                                                                                      at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:10220)
                                                                                      at e.runTask (file:///android_asset/www/build/polyfills.js:3:7637)
                                                                                      at invoke (file:///android_asset/www/build/polyfills.js:3:11397)
                                                                                      at e.args.(anonymous function) (file:///android_asset/www/build/polyfills.js:2:30193)", source: file:///android_asset/www/build/main.js (79432)
Run Code Online (Sandbox Code Playgroud)

我尝试这种方式,但我不工作:

this.task = setInterval(this.refreshData(), 300);
Run Code Online (Sandbox Code Playgroud)

这只调用我的函数一次.

有人有想法吗?

javascript typescript ionic2 ionic3 angular

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

如何使用按钮样式在Ionic 2+中创建自定义文件输入?

这是我的模板:

<label>{{label}}</label>
<input type="file" (change)="fileUpload($event)" id="file-input" style="position:absolute; top: -999999px" #fileInp>
<button ion-button (click)="onClick()">Upload</button>
Run Code Online (Sandbox Code Playgroud)

和ts文件:

@ViewChild('fileInp') fileInput: ElementRef;
@Input() label: string;
@Output() data = new EventEmitter<FormData>();

fileUpload(event) {
  let fd = new FormData();
  fd.append('file', event.srcElement.files[0]);
  this.data.emit(fd);
}

onClick() {
  this.fileInput.nativeElement.click();
}
Run Code Online (Sandbox Code Playgroud)

在Android和浏览器中一切正常,但在iOS上则不行.如果我禁用模板中的按钮,相同的代码将起作用.

cordova ionic2 ionic3 angular

6
推荐指数
2
解决办法
7449
查看次数

Ionic 3水平离子列表-想要显示水平离子列表

我想使用Ionic 3离子列表(或Ionic 3中的所有功能)来显示水平列表,而不是典型的垂直列表。

寻找没有很多CSS或很难维护代码的解决方案。

        <ion-content>

          <ion-list >
            <ion-item *ngFor="let data of dataArray"  (click)="dataDetail(data)">
              <ion-thumbnail item-left>
                <img src="https://data.url.com/{{data.path}}{{data.photoName}}"/>
              </ion-thumbnail>
              <h2>{{data.name}}</h2>
              <p>{{data.details}}</p>
            </ion-item>
          </ion-list>

        </ion-content>
Run Code Online (Sandbox Code Playgroud)

任何帮助都非常感谢。

谢谢菲尔

ionic-framework ionic2 ionic3

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

如何在离开Ionic 3中的Tab之前显示确认消息

我的离子3应用程序有一个带有两个Tabs的离子标签.当从tab切换到tab时,我需要显示一条确认消息(使用AlertController)以防止用户更改当前选项卡,除非他确认了他的选择.这是否可能在离子?我已经尝试在标签更改时显示确认消息.但是,我无法阻止新标签显示.

谢谢.

ionic-framework ionic2 ionic3 angular

6
推荐指数
1
解决办法
872
查看次数

获取所选项目并验证已检查项目的数量?

我正在使用一个 ion-select,我正在启用该multiple属性来选择几个选项.如果已经检查了3个选项,我找不到实时禁用其余选项的方法.我目前正在使用该ionSelect事件,但它仅在选中选项时有效.我怎样才能解决我的问题?我怎样才能解决我的问题?我想知道我是如何知道我已经标记了多少选项并实时获得它们的价值.

这是我的代码:https: //stackblitz.com/edit/ionic-8wewvd?file = pages/home/home.ts

页/家

<ion-label>Select a person</ion-label>
<ion-select [(ngModel)]="person" multiple="true">
  <ion-option *ngFor="let item of options; let i = index" 
    [value]="item.id" (ionSelect)="fn_checkOptions()" >
    {{item.name}}
  </ion-option>
</ion-select>

export class HomePage {
public options:object=[];


constructor(public navCtrl: NavController) {
this.options= 
[
  {"name":"pedro","id":1},
  {"name":"juan","id":2},
  {"name":"maria","id":3},
  {"name":"velez","id":4},
  {"name":"yaya","id":4}
 ]
}

 fn_checkOptions(){
  alert("hey")
 }

}
Run Code Online (Sandbox Code Playgroud)

ionic-framework ionic2 ionic3

6
推荐指数
1
解决办法
79
查看次数