标签: ionic2

"TypeError:无法读取属性'然后'未定义

我目前正在将我的离子v1应用程序更新为离子v2,但我在基于承诺的服务方面遇到了麻烦.

离子v1

home.controller.js

angular.module('myApp.home', ['myApp.services.camera',])

.controller('HomeCtrl', function($scope, CameraService) {
  $scope.getPicture = function() {
    var onSuccess = function(result) {
      // Some code
    };

    var onError = function(err) {
      // Some code
    };

    CameraService.getPicture().then(onSuccess, onError);
  };
});
Run Code Online (Sandbox Code Playgroud)

camera.service.js

angular.module('myApp.services.camera', [])

.service('CameraService', function($q, $ionicPlatform, $cordovaCamera) {
  return {
    getPicture : function() {
      var deferred = $q.defer();

      var onSuccess = function(result) {
        deferred.resolve(result);
      };

      var onError = function(err) {
        deferred.reject(err);
      };

      // my options here

      $ionicPlatform.ready(function() {
        $cordovaCamera.getPicture(options).then(onSuccess, onError);
      });

      return deferred.promise;
    }
  }; …
Run Code Online (Sandbox Code Playgroud)

promise typescript ionic2 angular

5
推荐指数
1
解决办法
7335
查看次数

如何使用ionic2配置代理?

Ionic 2已经弃用了ionic.config.js.ionic.project现在是ionic.config.json,我现在应该将我的设置放在那里.因此,按照离子的离子代理指令(无法在任何地方找到ionic2 doc),我的ionic.config.json现在看起来像这样:

{
  "name": "newapp",
  "app_id": "",
  "v2": true,
  "typescript": true,
  "proxies": [{
    "path": "/api",
    "proxyUrl": "https://api.service.com"
  }]
}
Run Code Online (Sandbox Code Playgroud)

但是,这似乎不起作用.

更新:我似乎得到代理服务,但我仍然收到CORS错误.

proxy ionic2

5
推荐指数
1
解决办法
7484
查看次数

rxjs主题switchmap http错误

我正在使用Subject,switchMap并.next()在http.get()触发新请求时取消先前挂起的http调用.

问题是,当我处理http错误(如超时)时_postMPCHC.next(...),html中调用的方法不再起作用...我是否需要在出错时重新创建订阅?怎么样 ?

import {Component} from '@angular/core';
import {NavController, NavParams, Toast} from 'ionic-angular';
import {Http, URLSearchParams} from '@angular/http';
import {AppSettings} from '../../appSettings';
import {Subject} from 'rxjs/Subject';


@Component({
  templateUrl: 'build/pages/video/video.html'
})
export class VideoPage {
  _postMPCHC: any= new Subject();

  constructor(private http: Http, private nav: NavController) {
    this.defineHttp();
  }

  defineHttp() {

    var sub = this._postMPCHC.switchMap((x: string) => {
      let params: URLSearchParams = new URLSearchParams();
      params.set('token', AppSettings.API_TOKEN);
      params.set('prog', 'mhz');
      params.set('prog', 'mpchc');
      params.set('action', x); …
Run Code Online (Sandbox Code Playgroud)

error-handling rxjs ionic2 angular

5
推荐指数
1
解决办法
803
查看次数

Ionic 2细分不适用于Google地图

我试图在离子2中实现谷歌地图作为细分(地图和列表).

这是我的HTML:

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

  <ion-segment [(ngModel)]="clients">
      <ion-segment-button value="map">
        Map
      </ion-segment-button>
      <ion-segment-button value="list">
        List
      </ion-segment-button>
    </ion-segment>
      </ion-navbar>
</ion-header>
<ion-content>
  <div [ngSwitch]="clients">
    <div *ngSwitchCase="'map'">
        <div #map id="map"></div>
     </div>

    <ion-list *ngSwitchCase="'list'">
      <ion-item>
        <h2>List Item 1</h2>
      </ion-item>


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

这是我的.scss文件:

 #map {
    width: 100%;
    height: 100%;
  }
Run Code Online (Sandbox Code Playgroud)

当我加载应用程序时,列表段工作正常,但地图显示为白色屏幕.如果我在ion-content标签之后定义了map div标签,那么地图将在两个段中显示.如何在1段中创建地图,在其他段中列出?

google-maps ionic-framework ionic2 angular

5
推荐指数
1
解决办法
927
查看次数

Ionic 2-仅适用于iPad的横向模式

我可以将方向设置为仅纵向config.xml,如下所示:

<preference name="Orientation" value="portrait"/>
Run Code Online (Sandbox Code Playgroud)

但是,如何在iPad版本中禁用横向定位,同时又如上所述禁用iPhone?

cordova typescript ionic2 angular

5
推荐指数
1
解决办法
486
查看次数

有没有一种简单的方法可以取消选择Ionic 2中的离子无线电?

在用户选择离子无线电之后,该组件将调用一个功能。我需要该功能来取消选择收音机。

模板:

  <form [formGroup]="myForm">
    <ion-list radio-group formControlName="listOptions">
      <ion-item>
        <ion-label>Option 1</ion-label>
        <ion-radio value="1" (ionSelect)="myFunction($event)"></ion-radio>
      </ion-item>
    </ion-list>
  </form>
Run Code Online (Sandbox Code Playgroud)

radio-button ionic2 angular

5
推荐指数
1
解决办法
4248
查看次数

ionic2:标头标题未对齐中心

在此处输入图片说明

我正在尝试将菜单切换图标向左对齐,标题向标题中心对齐。我正在使用以下代码:

<ion-header>
  <ion-toolbar color="primary">
     <button ion-button menuToggle left>
      <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>
      Home
     </ion-title> 
 </ion-toolbar>
Run Code Online (Sandbox Code Playgroud)

但是标题没有出现在中间。请帮忙。提前致谢。

ionic2

5
推荐指数
2
解决办法
5247
查看次数

如何使离子项目在Ionic 2中允许溢出?

我想让ion-item它的内容溢出。我尝试了以下CSS(具体来说是CSS)

ion-item{
   overflow: visible;
   height : 220px;
}
Run Code Online (Sandbox Code Playgroud)

但它似乎不起作用。

我还尝试将overflow : visible属性添加到ion-item(.item-inner,.item-block)生成的元素中,但是那也不起作用。

编辑(添加代码段)

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

  <ion-content padding>
    <div class="rel-container">
      <ion-list>
        <ion-item>
          <div>Name1</div>
          <div>Name2</div>
          <div>Lorem ipsum dolor</div>
          <div class="error-container">
            <div class="error">a quick brown fox</div>
          </div>
        </ion-item>
      </ion-list>
    </div>
  </ion-content>
Run Code Online (Sandbox Code Playgroud)

home.scss

ion-item,ion-list,ion-label, .item-md, .item-block, .item, .item-inner, .input-wrapper, .rel-container, .button-effect{
    overflow: visible;
}

page-home {
    ion-item{
        height: 9rem;
    }


    .error-container{
        padding: 5px;
        background: red;
        color: white; …
Run Code Online (Sandbox Code Playgroud)

css css3 ionic2 ionic3 angular

5
推荐指数
1
解决办法
1828
查看次数

使用ngModelChange去抖动角度2

我有ngModelChange一个textArea这样的:

      <ion-textarea placeholder="Type your message here" formControlName="message" [(ngModel)]="message" (ngModelChange)="changing($event)"></ion-textarea>
Run Code Online (Sandbox Code Playgroud)

现在我想知道用户在这里打字的位置textarea,所以我想用一个5000的音调进行去抖,以便知道他是否正在打字,而不是发送他正在打字的每一封信,我我想每隔5秒发一次这个事件,我怎么能实现呢?

typescript ionic2 angular

5
推荐指数
1
解决办法
6155
查看次数

如何在不保留选项卡的选项卡之外设置根页?

我的应用程序流程意味着在用户登录之前没有任何选项卡.第一页是全屏登录屏幕.登录后,用户将被带到tabs.ts我的标签代码中.

其中一个选项卡中有一个按钮,用于记录用户:

user.ts:

  // Logout
  logout() {    
    // Log the user out
    this.user.logout();

    // Take user to login screen
    this.navCtrl.setRoot(LoginPage);
  }
Run Code Online (Sandbox Code Playgroud)

我认为将根设置LoginPage为(不是任何标签页的一部分)会删除标签.不幸的是,并且标签仍然存在.出于显而易见的原因,这确实存在问题.

如何从此处删除标签?我觉得我需要抓住标签实例并销毁它,但这是一个猜测,我很难在文档中找到任何东西.

typescript ionic-framework ionic2 ionic2-tabs angular

5
推荐指数
1
解决办法
1684
查看次数