标签: ionic2

如何测试@ ionic/storage?

我需要测试我的服务,我正在使用@ ionic/storage来获取和设置方法中的数据.我是否需要模拟整个存储机制或者最佳实践?

ionic2 angular2-testing angular

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

Ionic2 navController pop with params(CallBack)

我想在两个页面之间进行回调.在第1页中,我有这个代码:

  DataInfo= [
    {
       Price: 0,
       ClosePrice: 0,
       UpdateTime:"",
       DefaultPrice:0
    }

  ] 

GetClosePrice(i):number{
return DataInfo[i].ClosePrice;
}
Run Code Online (Sandbox Code Playgroud)

我想从页面2获取'i'的值,当navcontroller返回到页面1时,如何加载函数GetClosePrice()(this.navCtrl.pop())

callback ionic2

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

离子2中的可滚动段(水平)

我试图使用ionic2中的段进行水平滚动.这是代码:

home.ts:

<ion-scroll scrollX="true" style="width:100vw;height:350px" >
<ion-segment [(ngModel)]="relationship" color="primary">


      <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
        Friends
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
       <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>

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

根据这个文件,我使用离子段外的离子滚动,所以我得到这样的UI.

图片

如何根据名称的长度显示我的名字,并仅显示3到4个名称.用户滚动后,应逐个显示下一个名称.

scroll segment ionic2 angular

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

Ionic App没有在Android设备上安装

我是Ionic的新手.我刚刚在Ionic上创建了一个在浏览器上运行良好的应用程序.因此,我使用生成android-release-unsigned.apk文件的Android工作室将其转换为.apk文件.我将它转移到我的设备上,并尝试安装它,我遇到它没有安装.我无法弄清楚原因.需要一些帮助.

android typescript ionic-framework ionic2 angular

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

迭代相同组件angular2的多个@ViewChild实例

我有一个带有ParentComponent的Ionic 2应用程序,调用ChildComponent @ViewChild方法来启动多个ChildComponents.其中一个ChildComponents在视图中使用不同的参数实例化两次,如下所示:

<ChildComponent [startFrom]="0" [limitTo]="1"></ChildComponent>
<ChildComponent [startFrom]="1" [limitTo]="1"></ChildComponent>
Run Code Online (Sandbox Code Playgroud)

在离线/在线设备状态更改后,我调用ChildComponent的方法来更新它返回的项目列表.

@ViewChild(ChildComponent) childComponent: ChildComponent;

ngOnInit(): void {
    this.networkService.connectSubscription(() => {
        this.childComponent.getItems();
    });
}
Run Code Online (Sandbox Code Playgroud)

这里的问题this.childComponent只是获取两者的第一个ChildComponent实例.

有没有办法通过相同@ViewChild组件的多个实例进行迭代,所以我可以做这样的事情this.childComponent1.getItems()和this.childComponent2.getItems()?

谢谢你的帮助.

javascript ionic2 angular2-components angular

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

离子网内的离子复选框使网格空白

我有以下HTML:

<ion-item-sliding *ngFor="let item of playlist.data | filterBy: filter; let i = index;">
  <ion-item class="playlist-modal-item">
    <ion-grid>
      <ion-row>
        <ion-col col-4>
          <h2>{{ item.name }}</h2>
          <p>{{ item.artist }}</p>
        </ion-col>
        <ion-col col-4>
        </ion-col>
        <ion-col col-4>
          <ion-checkbox [(ngModel)]="playlist.data[i].selected"></ion-checkbox>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>
  <ion-item-options side="right">
    <button ion-button>Play Next</button>
  </ion-item-options>
  <ion-item-options side="left">
    <button ion-button>Play Last</button>
  </ion-item-options>
</ion-item-sliding>
Run Code Online (Sandbox Code Playgroud)

我的问题在于<ion-checkbox [(ngModel)]="playlist.data[i].selected"></ion-checkbox>线路.如果我删除此行,它将按预期工作,不带复选框.当我添加复选框行时,列表项会针对数组中的每个项重复,但每个项的内容都是空白的.

我也试过这样做:<ion-checkbox [(ngModel)]="item.selected"></ion-checkbox>也做同样的事情.

控制台中没有显示错误,我知道属性都是正确的并且已填充.该item.selected物业也已默认为虚假.

编辑:为了澄清,当我有复选框时,列表项会重复,但每个项目的内容都是空的,但只有当复选框行在那里时.

JSON看起来像这样:

playlist = {
    data: [
        {
            name: 'foo',
            artist: 'bar',
            selected: false
        },
        ...
    ]
}
Run Code Online (Sandbox Code Playgroud)

编辑:filterBy不是问题,当我删除它时它做同样的事情.

ionic2 angular

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

ionic - 如何在离子头中对长字符串进行自动换行

这是我的代码,我试过text-wrap,里面ion-header仍然无法显示整个标题.

<ion-header>
  <ion-toolbar text-wrap color="danger">
    <ion-buttons>
        <button ion-button navPop icon-only>
            <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>{{new.title}}</ion-title>
  </ion-toolbar>
</ion-header>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

更新

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons>
        <button ion-button navPop icon-only>
            <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <ion-item color="danger" text-wrap>
     <ion-title >{{new.title}}</ion-title>
    </ion-item>
  </ion-toolbar>
</ion-header>
Run Code Online (Sandbox Code Playgroud)

我尝试添加ion-item,但仍然不适合我. 在此输入图像描述

更新2

.ios .toolbar-title {
   text-overflow: inherit;
   white-space: normal;
   text-align: left;
   font-size:1.3em;
}

.md .toolbar-title {
   text-overflow: inherit;
   white-space: normal;
   text-align: left;
   font-size:1.3em;
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

css ionic-framework ionic2

6
推荐指数
3
解决办法
4866
查看次数

离子安全存储 - 要求用户设置锁定屏幕

我正在尝试初始化安全存储插件.当此失败时,表示用户没有安全的锁屏设置.使用github页面我正在尝试重新创建提供的示例:

var ss;
var _init = function () {
    ss = new cordova.plugins.SecureStorage(
        function () {
            console.log('OK');
        },
        function () {
            navigator.notification.alert(
                'Please enable the screen lock on your device. This app cannot operate securely without it.',
                function () {
                    ss.secureDevice(
                        function () {
                            _init();
                        },
                        function () {
                            _init();
                        }
                    );
                },
                'Screen lock is disabled'
            );
        },
        'my_app');
};
_init();
Run Code Online (Sandbox Code Playgroud)

这是我的尝试:

private createSecureStorage() {
    this.secureStorageAPI.create(this.storeName).then( 
        (storage: SecureStorageObject) => {
            this.secureStorage = storage;
    }).catch( 
        (error) => {
            this.dialogs.alert( 'Please …
Run Code Online (Sandbox Code Playgroud)

javascript typescript ionic2 ionic-native

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

ionic3 - ios键盘隐藏焦点上的输入字段,直到给出一些输入

请找到我的下面ionic info命令

cli包:(/ usr/local/lib/node_modules)

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

全球套餐:

Cordova CLI : 7.0.1
Run Code Online (Sandbox Code Playgroud)

本地包裹:

@ionic/app-scripts : 1.3.12
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.5.0
Run Code Online (Sandbox Code Playgroud)

系统:

ios-deploy : 1.9.2
Node       : v6.11.2
npm        : 3.10.10
OS         : macOS High Sierra
Xcode      : Xcode 9.0 Build version 9A235
Run Code Online (Sandbox Code Playgroud)

这是我的代码.

<div style="position: absolute; bottom: 0px;">
        <img src="assets/login/welcome_login_bg.png" />
        <ion-list style="position: initial">
            <form [formGroup]="loginForm">
                <ion-item no-padding class="firstItem">
                    <ion-input [(ngModel)]="username" formControlName="username" type="email" spellcheck="false" autocapitalize="off"> …
Run Code Online (Sandbox Code Playgroud)

forms keyboard cordova ionic2 ionic3

6
推荐指数
0
解决办法
771
查看次数

Ionic 3 - 每个页面都需要自己的模块吗?

我是Ionic的新手并试图了解如何组织中型应用程序.

每个页面都应该有自己的模块吗?或者将类似的页面分组到同一个模块中会更好吗?甚至可以这样做吗?看来IonicPageModule.forChild()方法只接受一个页面:

    IonicPageModule.forChild(AdministerUsersPage)
Run Code Online (Sandbox Code Playgroud)

那么每个页面都可以拥有自己的模块吗?拥有这么多模块有什么缺点吗?

看起来我们从一个极端走到另一个极端 - 没有模块在根上下文中声明所有内容,以便为每个页面分隔模块.

ionic2 ionic3

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