标签: ionic2

在我的Ionic 2应用程序上努力探索E2E测试.我读过我应该使用量角器,但我不知道如何用Ionic 2做这个.

我正在使用Ionic v2和Phonegap条码扫描器插件.

当执行下面的scanBarcode()函数时,我收到错误:

Uncaught TypeError: Cannot set property 'test' of null

在

this.test = result.text;

码:

import {Page} from 'ionic-angular';


@Page({
  templateUrl: 'build/pages/scanBarcode/scanBarcode.html'
})
export class ScanBarcode {
  constructor() {
    this.test = "";
  }

  scanBarcode(){
    cordova.plugins.barcodeScanner.scan(
      function (result) {
        console.log(result.text);
        this.test = result.text;
        console.log("SB result" + test);
      },
      function (error) {
        alert("Scanning failed: " + error);
      }
    )
  }
}

第一个console.log没有错误,并显示正确的信息:

console.log(result.text);

我在使用Ionic 2和设置全局变量方面遇到了一些困难.我的应用程序的结构如下:

Main app
  |
  |--- Page1 (Info)
  |--- Page2 (Map)
  |--- Page3 (List)
         |
         |--- ItemTabsPage
                |
                |---tab1
                |---tab2
                |---tab3

我的目的是在Page3中显示一个列表,并在选择一个项目后,在选项卡中显示其他信息.

我使用以下标签将信息从第3页发送到页面:

itemTapped(event, item) {
    this.nav.push(ItemTabsPage, {
      item: item
    });
  }

问题是我无法将信息发送到子选项卡.我想根据选择的项目显示不同的信息.我已经尝试定义一个可注入的globalVars.js来将值存储在一个变量中:

import {Injectable} from 'angular2/core';

@Injectable()
export class GlobalVars {

  constructor(myGlobalVar) {
    this.myGlobalVar = "";
  }

  setMyGlobalVar(value) {
    this.myGlobalVar = value;
  }

  getMyGlobalVar() {
    return this.myGlobalVar;
  }

}

然后更新列表中itemTapped的代码,如下所示:

itemTapped(event, item) {
        this.nav.push(ItemTabsPage, {
          item: item
        });
        this.globalVars.setMyGlobalVar(item);
      }

但是,我总是得到同样的错误:

Uncaught EXCEPTION: Error during …

问）如何将我的参数作为副本传递给下一页，以便在返回时不会在前一个屏幕中保留对它的更改？

例如

  showDetails(item) {
    this._nav.push(PersonDetailsPage, {
      person: item
    });    
  }

因此，当我查看PersonDetailsPage时，我希望能够进行更改，取消，返回并不修改原始对象。

谢谢。

如何验证用户名与最大长度或使用MINLENGTH场angular2 不使用formbuilder.

我尝试了以下方式,但没有工作

<ion-item>
        <ion-icon name="person" item-left class="placeholder-icon"></ion-icon>
        <ion-label floating primary>Username</ion-label>
        <ion-input [(ngModel)]="login.username" ngControl="username" type="text" #username="ngForm" ng-minlength="5" required>
        </ion-input>
      </ion-item>

      <div [hidden]="username.valid || username.pristine">
        <p *ngIf="username.errors && username.errors.required" danger padding-left>
            user name is required
        </p>
        <p *ngIf="username.errors && username.errors.minlength" danger padding-left>
            min length atleast 5
        </p>
      </div>    
<ion-item>

我正试图从复选框访问值来做一个quizz应用程序,但我有两个问题:

1. 我收到以下错误:"EXCEPTION:在[Quizzs in Quizz1 @ 3:10]中尝试差异'quizz.choice1'时出错".
2. 我无法访问复选框的值.

这是我的.html表单:

<form #quizzForm="ngForm" (ngSubmit)="onSubmit(quizzForm.values)">

  <ion-list padding radio-group *ngFor="#quizz of quizzs">

      <ion-list-header text-center>
        QUIZZ 2
      </ion-list-header>

      <p text-justify>
        <b text-uppercase>Question :</b>
        <span courant>{{quizz.question}}</span>
      </p>

      <ion-item>
        <ion-label>{{quizz.choice1}}</ion-label>
        <ion-radio
            ngControl="choice1"
            #choice1="ngForm"
            value="quizz.choice1">
        </ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>{{quizz.choice2}}</ion-label>
        <ion-radio
            ngControl="choice2"
            #choice2="ngform"
            value="quizz.choice2">
        </ion-radio>
      </ion-item>

      <ion-item [hidden]="!quizz.choice3">
        <ion-label>{{quizz.choice3}}</ion-label>
        <ion-radio
            ngControl="choice3"
            #choice3="ngform"
            value="quizz.choice3">
        </ion-radio>
      </ion-item>

      <ion-item [hidden]="!quizz.choice4">
        <ion-label>{{quizz.choice4}}</ion-label>
        <ion-radio
            ngControl="choice4"
            #choice4="ngform"
            value="quizz.choice4">
        </ion-radio>
      </ion-item>

      <br/><br/>

      <div style="width:50%; margin: 0 auto">
        <button
          type="submit"
          [disabled]="!choice1.checked && !choice2.checked && !choice3.checked && !choice4.checked"
          block …

我已经在Ionic 2应用程序中包含moment js了moment-range插件，如下所示：

import * as moment from 'moment';
import 'moment-range';

这工作正常，我可以同时使用它们，但是Typescript给我以下错误：

Javascript：

let range = moment().range(self.weekStart, self.weekEnd);

打字稿错误：

Error TS2339: Property 'range' does not exist on type 'Moment'.

我已经运行以下命令来尝试通过安装打字文件来停止此错误：

typings install moment-range --ambient --save

但这似乎没有任何效果。还有什么我需要做的，还是有一种可以消除错误的方法？

谢谢你的帮助。

他们刚刚更新了Ionic 2以使用Angular 2 RC1,这很棒,除了路由对我来说仍然有点奇怪.我试图跟随更新指南,但我的导航仍未定义.旧的getComponent方法有效,但是他们通过此更新摆脱了这种方法.它适用于组件或页面,但不适用于服务.

我得到的错误是 No provider for NavController!

import {IonicApp, NavController, Nav} from 'ionic-angular';
import {Injectable, ViewChild} from '@angular/core';
import {Http, HTTP_PROVIDERS, Headers} from '@angular/http';
import {HomePage} from '../pages/home/home';

@Injectable()
export class User {
  isLoggedIn: boolean = false;
  username: string = 'jaruesink';
  constructor (public nav: NavController) {
  }
  login(username) {
    this.isLoggedIn = true;
    this.username = username;
    this.nav.push(HomePage);
  }
  logout() {
    this.isLoggedIn = false;
  }
}

我开始学习离子2,我在app.ts文件中导入依赖项时遇到问题.

当我想要使用时:

"import {Http} from "angular2/http";

它告诉我,这个主题的错误:

[ts] cannot find module 'angular2/http'.

这是我的package.json的内容:

"dependencies": {
"@angular/common": "^2.0.0-rc.1",
"@angular/compiler": "^2.0.0-rc.1",
"@angular/core": "^2.0.0-rc.1",
"@angular/http": "^2.0.0-rc.1",
"@angular/platform-browser": "^2.0.0-rc.1",
"@angular/platform-browser-dynamic": "^2.0.0-rc.1",
"@angular/router": "^2.0.0-rc.1",
"es6-shim": "^0.35.0",
"ionic-angular": "2.0.0-beta.7",
"ionic-native": "^1.1.0",
"ionicons": "3.0.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
}

如何ngfor在表单中绑定检查器

    <ion-list *ngSwitchWhen="'contacts'">
        <ion-item *ngFor="#contact of contacts">
            <ion-label> {{contact.name}}</ion-label>
            <ion-checkbox checked="false" [(ngModel)]="newMessage.contact"></ion-checkbox>
            <ion-note item-right>
                {{contact.cell}}
            </ion-note>
        </ion-item>
    </ion-list>

点击所有内容或表单显示错误

if (form.valid) {
    console.log(this.newMessage);
}