标签: ionic2

我正在尝试将颜色更改为lightgray我使用的html代码如下:

  <ion-card *ngFor="let details of checkOutAddr" round inset class="ion-card">
    <ion-item>
      <ion-row>
        <ion-col><ion-icon ios="ios-create" md="md-create" item-right class="color1"></ion-icon>
          <b>{{details.name}}</b>
        </ion-col>
      </ion-row>

      <ion-row>
        {{details.stage}}
      </ion-row>

      <ion-row>
        {{details.main}}
      </ion-row>

      <ion-row>
        {{details.state}}
      </ion-row>

      <ion-row>
        <ion-col>
          <ion-icon ios="ios-call" md="md-call" item-left></ion-icon>
            {{details.phone}} 
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <ion-icon ios="ios-mail" md="md-mail" item-left></ion-icon> 
            {{details.mail}}
        </ion-col>
      </ion-row>
    </ion-item>
  </ion-card

我使用scss代码如下:

.ion-card {
        background-color: slategray !important;
    }

我如何获得img下面的外观和感觉:

我不明白,应该如何在angular2中以模型驱动的形式处理复选框组.

该模型有一个languages我实例化的属性,如下所示:

this.model = {
  languages: []
};

使用FormBuilder创建的形式:

this.modelForm = this.formBuilder.group({
  'languages': [model.languages, Validators.required],
});

和模板:

<div *ngFor="let language of translateService.get('languages') | async | key_value">
  <input type="checkbox" name="languages[]" formControlName="languages" value="{{ language.key }}" id="language_{{ language.key }}">
  <label attr.for="language_{{ language.key }}">{{ language.value }}</label>
</div>

在div需要对造型的目的(定制复选框),key_value使按键和循环使用的语言,明显的价值.

第一个问题来自验证.如果检查并取消选中一个复选框(并且未选中其他复选框),则输入仍然有效 - 不知何故很奇怪.

第二个问题伴随着价值,即true如果检查两种或更多种语言,则false另外.

然后有第三个问题,其初始值languages只是一个空数组,但会导致所有复选框最初被检查(如果初始值设置为a string,则不会发生),尽管我无法发现任何checked属性DOM.

我正在使用最新的离子beta(2.0.0-beta.10),它使用角度/核心版本2.0.0-rc.4和角度/形式版本0.2.0.

那么,有没有关于如何使用复选框组的指南？有什么建议或想法吗？

我正在使用ionic2和angular2构建移动Web应用程序.我不需要移动应用程序.

我尝试使用ionic2 cli构建示例应用程序,但应用程序的大小为2.5MB,缩小后大小为1.5MB,这也非常大,并且在浏览器上加载需要很长时间.

我发现main.js文件非常大,因为它包含了构建混合移动应用程序的各种其他功能,在我的情况下不需要.我正在寻找离子2捆绑文件,我认为只需要构建移动Web应用程序(如果我错了,请纠正我).请建议减少应用程序大小的最佳方法.

解决此问题后出现此错误

这是我的ionic info:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.4.0
Xcode version: Not installed

(我也在使用npm v4.1.1)

尝试构建时@ionic/app-scripts,我收到以下错误:

E:\Documents\Year_3\Mobile_Application_Development\mammoth-v2\node_modules\webpack-sources\node_modules\source-map\lib\source-node.js:95
      var code = nextLine.substr(0, mapping.generatedColumn -
                         ^

TypeError: Cannot read property 'substr' of undefined
    at Function.<anonymous> (E:\Documents\Year_3\Mobile_Application_Development\mammoth-v2\node_modules\webpack-sources\node_modules\source-map\lib\source-node.js:95:30)
    at Array.forEach (native)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (E:\Documents\Year_3\Mobile_Application_Development\mammoth-v2\node_modules\webpack-sources\node_modules\source-map\lib\source-map-consumer.js:155:14)
    at Function.SourceNode_fromStringWithSourceMap …

我在iOS上遇到了Ionic2 Final点击行为的问题.

页面转换后,点击或点击卡片不会工作1-2秒,因此用户必须点击或单击两次(或点击前等待片刻).我已经尝试<a>在卡内使用而不是直接将卡片附加到卡上.我也试过(click), (tap), [navpush],我试过添加tappable到卡.

<ion-content padding class="modules card-background-page">
  <ion-card  class="module-card" *ngFor="let module of modules">
  <a (tap)="tapEvent($event)" (click)="clickEvent($event)" [navPush]="modulePage" [navParams]="{id: module.id}" >
    <img src="{{module.thumbnail}}"/>
    <div class="card-content">
      <div class="card-title">
          <strong>Module {{module.number}}</strong>
      </div>
      <div class="card-subtitle">
          <strong *ngIf="translate.currentLang!='fr'">{{module.subtitle_en}}</strong>
          <strong *ngIf="translate.currentLang=='fr'">{{module.subtitle_fr}}</strong>
      </div>
    </div>
  </a>
  </ion-card>
</ion-content>

在Android上它工作正常.

经过大量的试验和错误,我通过使用android转换"修复"了这个问题:

    IonicModule.forRoot(MyApp, {
      pageTransition: 'md-transition'
    }),

所以问题似乎是iOS过渡.知道如何真正解决这个问题吗？有人有同样的问题吗？转换后或关闭侧面菜单时,我也有很小的问题.但这些并不是那么容易复制的.

iPhone 6S上的iOS 10.1.1

我的Firebase/Ionic 2应用程序在浏览器(离子服务)和本地Android设备(离子运行android)上运行良好.该应用使用Firebase数据库和身份验证功能.

该应用程序也适用于iOS设备.

但是,当我在Android上发布到Google Play进行beta测试时,auth登录方法始终失败并显示错误:"发生了网络错误(例如超时,中断连接或无法访问的主机)." 但Firebase数据库方法运行正常.我只使用Firebase电子邮件/密码提供商.

我已经阅读了我能找到的与此问题类似的所有帖子并尝试了所有这些解决方案.我已升级到所有组件的最新版本.

已安装cordova-plugin-whitelist插件.它默认安装在一个新的Ionic 2项目中.我的理解是以下安全设置不会阻止Firebase.

的index.html

<meta http-equiv="Content-Security-Policy" content="font-src * data:; img-src * data:; default-src * 'unsafe-eval' 'unsafe-inline'; script-src * 'unsafe-eval' 'unsafe-inline'">

config.xml中

<access origin="*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-navigation href="*"/>

我的服务

public login(email: string, password: string): Observable<any> {
    return Observable.fromPromise(
        <Promise<any>>firebase.auth().signInWithEmailAndPassword(email, password)
    );
}

我的表格

this.authService.login(this.loginForm.value.email, this.loginForm.value.password)
        .subscribe(() => {
            // Do something!
        }, error => {
            // A network error has occurred!
        });

版本信息

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: …

我在我的proyect中试过这个:

<div padding *ngIf="TotalAPagar">
    $ {{TotalAPagar | number }}  
</div>

调用我的变量TotalAPagar,我正在使用数字管道,但它显示的值为1,000,500.

我需要将编号约定更改为dots.例如.1.000.000

我一直在文档中阅读角度,但没有任何例子.

我是Ionic2应用程序开发的新手,我正在尝试用它构建一个Android应用程序.我想在Visual Studio模拟器中运行该应用程序,并在运行'cordova build android'命令时收到以下错误.请帮忙!提前致谢!

**C:\Devlopment ionic\sample\sampleapp>cordova build android
ANDROID_HOME=C:\Users\d.dutta.chowdhury\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_131
The system cannot find the path specified.
Error: cmd: Command failed with exit code 1**

我创建了AuthHttpProvider,它是Http包装器,允许发送GET/POST/PUT/DELETE请求并自动为每个请求添加身份验证令牌(jwt).我在所有的ionic2应用程序中使用这个包装器而不是Http.现在,当我检测到来自服务器的任何响应有403 Http错误代码时,我想注销用户(并转到loginPage).

因此,当我尝试在构造函数中注入NavController(在403检测后将其用于loginPage)

constructor (public navCtrl: NavController)

我明白了:

Uncaught (in promise): Error: No provider for NavController

如何访问Provider内的navCtrl？

我正在使用离子3 ion-slides和ion-slide.我面临的问题是内容在中心,我希望它是顶部对齐的.代码如下:

<ion-content padding>

    <ion-slides pager>
      <ion-slide style="vertical-align:top">
          <ion-card padding>
           <ion-card-header class="ha-card-header">About you</ion-card-header>
              <ion-card-content>
                    <ion-label>Family Size&nbsp;<ion-badge>{{energyProfile.familySize}}</ion-badge></ion-label>
                    <ion-item no-padding>
                        <ion-range [(ngModel)]="energyProfile.familySize" min="0" max="10" step="2">
                          <ion-icon range-left small name="person"></ion-icon>
                          <ion-icon range-right name="people"></ion-icon>
                        </ion-range>
                    </ion-item>
              </ion-card-content>
            </ion-card>
      </ion-slide>
</ion-slides>
<ion-content>