标签: ionic2

离子选择Ionic 2中的动态选项?

我正在开发Ionic 2中的应用程序.我需要以动态的方式添加离子选择选项,但我对可能非常简单的事情感到难过.这是我的代码片段.

<ion-select [(ngModel)]="classifications" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" value="key" [checked]="true">{{key}}</ion-option>
Run Code Online (Sandbox Code Playgroud)

this.classifications = this.local.get('classifications')._result;
    console.log('classifications: '+ this.local.get('classifications')._result);


updateSelectedValue(event:string):void {
   this.selectedObject = JSON.parse(event);
   console.log('selectedObject: '+this.selectedObject);
}
Run Code Online (Sandbox Code Playgroud)

控制台日志的输出:

classifications: ["Any","Agriculture, Forestry, And Fishing","Mining","Construction","Manufacturing","Transportation, Communications, Electric, Gas, And Sanitary Services","Wholesale Trade","Retail Trade","Finance, Insurance, And Real Estate","Services","Public Administration "]
Run Code Online (Sandbox Code Playgroud)

我也得到了例外.

EXCEPTION: Cannot find a differ supporting object '["Any","Agriculture, Forestry, And Fishing","Mining","Construction","Manufacturing","Transportation, Communications, Electric, Gas, And Sanitary Services","Wholesale Trade","Retail Trade","Finance, Insurance, And Real Estate","Services","Public Administration "]' in [classifications in JobsearchPage@30:17]
Run Code Online (Sandbox Code Playgroud)

编辑:

它没有设定其选择的价值.我在Angular 1中做过这个.

<select id="classificationId" …
Run Code Online (Sandbox Code Playgroud)

ionic2 ionic2-select angular

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

在Visual Studio代码中调试Ionic 2 - 如何在源文件中命中断点?

问题: 断点只在连接的构建文件www\build\js\app.bundle.js中被命中

复制

  1. 我启动模拟器,在模拟器上运行应用程序(这非常有效)

  2. 在app文件夹文件中设置一些断点,例如 app/pages/list/list.js

  3. 在VS Code> Debug Pane中,我选择Attach to running Android on Emulator.调试器运行并连接.

实际结果

  1. 原始源文件中未触发断点.如果我在build js文件中设置它们,它们才会被击中www\build\js\app.bundle.js

关于Sourcemaps的注意事项

在MyIonic2Project\.vscode\launch.json,"附加到模拟器上运行"配置的设置为:

"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
Run Code Online (Sandbox Code Playgroud)

我的设置

这是一个Ionic 2项目,使用以下方式创建:

ionic start --v2 -a "My Ionic 2" MyIonic2Project tutorial
Run Code Online (Sandbox Code Playgroud)

这与cli命令完美配合:在Chrome上使用ionic serve,模拟器使用ionic emulate android,以及在设备上(HTC One M8),所以一切都很好到这一点:-)

我安装了最新的Visual Studio Code,并包含了Cordova工具:ext install cordova-tools

ionic-framework visual-studio-code ionic2

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

Sidemenu和Modals的动画比自己的动画更快

从底部(Ionic2 Modal)向外和向下的侧面菜单或向上滑动模式盒的动画非常快速和平滑.

现在我为浮动动作按钮定义了自己的动画.这个动画比离子动画要慢很多.有什么不同?

为什么我的动画有点滞后?

animations: [
    trigger('heroState', [
      state('false', style({
        right: '-500px',
      })),
      state('true',   style({
        right: '0px',
      })),
      transition('false => true', animate('500ms ease-in')),
      transition('true => false', animate('500ms ease-out'))
    ])
  ],
Run Code Online (Sandbox Code Playgroud)

ionic-framework ionic2 angular

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

location.protocol" 必须是 http 或 https

我使用 Cordova + Angular 2 + Ionic 2 开发了一个混合移动应用程序。

使用 firebase Auth 时,当调用 signInWithPopup() 或 signInWithRedirect() 进行社交登录时,firebase 返回错误“此应用程序运行的环境不支持此操作。“location.protocol”必须是 http 或 https。

这篇文章也有很多评论,关于同样的事情:https : //firebase.googleblog.com/2016/01/social-login-with-ionic_77.html

这是因为 location.protocol 是 file:// 而不是 http/s。所有混合应用程序都会有这个问题。

帮助。

firebase firebase-authentication ionic2

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

main.worker.js?那是什么?

我正在使用Mozilla PDF Viewer在Ionic 2中构建PDF查看器,但遇到了问题.我pdf.js按照这些说明建造了.生成的代码包括以下行:

GET http://localhost:8100/build/main.worker.js

Chrome在这一行上抱怨无法找到该文件pdf.worker.js.

现在,我之前没有遇到过网络工作者,所以我不确定这个错误意味着什么,或者在哪里找到或构建这个文件.我注意到构建过程也会产生一个名为的文件main.worker.js,我怀疑这可能是它之后的文件,尽管将其重命名为pdf.js无效.

如果你知道的话,我相信这是一个非常简单的问题.我错过了什么?


好的,经过多一点挖掘,我发现这更符合我的情况.我正在使用Ionic 2,我不知道如何生成此行中引用的文件:

GET http://localhost:8100/build/main.worker.js

任何人都可以照亮我的黑暗心灵吗?

pdf pdf.js ionic-framework ionic2 angular

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

如何返回一个空的observable

根据这个答案如何在rxjs中返回一个空的observable我已经尝试了所有它但它对我不起作用

这是我的代码

post(url):Observalbe<any>{
   if(this.holder.nullConnection()){ //checking internet connection
      //return empty observalbe
      return Observable.empty() ;
    }else{
      return this.http.post(this.configurator.restServerBaseUrl+url,data)
      .map((result:Response)=> {
        return result.json()
      })
    }
}
Run Code Online (Sandbox Code Playgroud)

我已经尝试了几乎所有的答案,你可以看到上面的堆栈问题任何帮助返回一个空洞的想法.

observable ionic2 angular

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

离子生命周期 ionViewdidEnter 不起作用

我有一个ionic 2应用程序。它在选项卡视图中有一个选项卡。有两个选项卡。Home和Feed。该Feed页面有两个新选项卡Users和Freinds。Feed是Users页面的根,Users页面有一个ionViewDidEnter方法。

我面临的问题是当我在父选项卡Home和Feed. 如果我在两者之间切换Users并且Friends它有效。否则,只有父组件中的生命周期有效。

我该如何解决这个问题?有什么办法可以快速解决这个问题吗?

export class TabsPage {
  tab1Root: any = FeedPage;
  tab2Root: any = HomePage;
  constructor(public navCtrl: NavController , public auth: Authentication , public book: Bookemon) {}
}
Run Code Online (Sandbox Code Playgroud)

tabs.html

<ion-tabs selectedIndex="0" tabsPlacement="top">
  <ion-tab [root]="tab2Root" tabTitle="home" tabIcon="book"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="feed" tabIcon="compass"></ion-tab>
</ion-tabs>
Run Code Online (Sandbox Code Playgroud)

秒标签在 FeedPage

export class FeedPage {
  tab1root = UsersPage; …
Run Code Online (Sandbox Code Playgroud)

ionic-framework ionic2 angular

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

用 ngFor 迭代一个 Json 对象

我从网络服务器获得以下 JSON 字符串。

[
{"name":"Joe Lincoln","age":"42","grade":"9","active":"1"},
{"name":"Jack Smith","age":"38","grade":"8","active":"1"},
{"name":"Peter Smith","age":"42","grade":"9","active":"0"},
{"name":"Eva Lorens","age":"42","grade":"8","active":"1"},
]
Run Code Online (Sandbox Code Playgroud)

我想在 HTML 中公开 JSON,我尝试了以下操作,但是字段没有被填充,我也没有异常,所以我很难找出为什么它不起作用。

TS

  this.servletService.webserviceCall('MemberUnit', 'getMembers',  params).then((obs)=>{
      obs.subscribe(
          (data) => {
            this.members =  JSON.parse(data);
          }); 
    }) 
Run Code Online (Sandbox Code Playgroud)

HTML

 <ion-item *ngFor="let member of members">
 <ion-avatar item-left>
       <svg width="75px" height="75px" >
   <text x="50%" y="50%" text-anchor="middle" stroke="#2980b9" stroke-width="2px" dy=".1em">{{member.grade }}</text>
      </svg>
      </ion-avatar>
       <h2>{{member.name}}</h2>
      <h3>{{member.age}}</h3>
    </ion-item>
Run Code Online (Sandbox Code Playgroud)

json ionic2 angular

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

离子 2 应用程序中的“AngularFireAuth”类型不存在属性“authState”

我正在尝试使用 firebase 的 AngularFire2 进行 Facebook 身份验证。我遵循与本教程完全相同的步骤github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic2.md

但由于某种原因,这行不通。它给了我提供者页面上的许多错误。这是我的代码。

import { Injectable } from '@angular/core';
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';


@Injectable()
export class AuthService {
     private authState: Observable<firebase.User>;
     private currentUser: firebase.User;

     constructor(public http: Http, public afAuth: AngularFireAuth) {
     console.log('Hello AuthService Provider');
     this.authState = afAuth.authState; //First error here.
     afAuth.subscribe((user: firebase.User) => { //second here …
Run Code Online (Sandbox Code Playgroud)

angularjs firebase firebase-authentication ionic2 angularfire2

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

离子3中"对象"类型中不存在如何修复属性?

我已经调用API获取数据,但是我收到错误属性 sellerDto在ionic3中的 类型Object上不存在,我将尝试将数据声明为声明的对象,但是再次发生同样的错误如何修复此错误?

/*
  @Copyright Notice:
  @(#)
  @Type: TS	
  @For:  create-accont.html.
  @Description : userLoggedInSuccess for create the user account 1st in the GCP 
 */
 public userData       : any = {};
userLoggedInSuccess(userObject) {
    //Enable the loader after call the FB function
    var self = this;
    //Declare the local variable
    self.url                  = "";
    self.API_HOST             = "";
    self.paramData                 = "";
    let userTypeKeyId = userObject.uid;

    let url = self.API_HOST + "/api/login/dto";
    let paramData  = "userTypeKeyId=" + userTypeKeyId;

    let …
Run Code Online (Sandbox Code Playgroud)

javascript ionic-framework ionic2 ionic3 angular

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