标签: ionic2

我有离子选择器，其中有很多选项，当视图准备好根据CurrentNumber选择一个默认值时，我就有离子选择器。我有这个代码：

<ion-select formControlName="Level">
          <ion-option [value]="level.id" *ngFor="let level of levels" [attr.selected]="(level.levelNumber == currentLevel)? true : null">
             {{level.name}}
          </ion-option>
</ion-select>

this.currentLevel = 1;

数据来自服务器，像这样：

data = [
 {
  levelNumber : 1,
  name:'abcd'
 },
 {
levelNumber:2,
name:'efg'
 }
]

我开始使用graphql服务开发离子应用程序，但是我在节点模块中遇到了一些问题，我该如何解决呢？

[14:32:44]  typescript: D:/ionic/node_modules/@types/graphql/subscription/subscribe.d.ts, line: 17 
            Cannot find name 'AsyncIterator'.

      L16:      subscribeFieldResolver?: GraphQLFieldResolver<any, any>
      L17:  ): AsyncIterator<ExecutionResult>;

[14:32:44]  typescript: D:/ionic/node_modules/@types/graphql/subscription/subscribe.d.ts, line: 29 
            Cannot find name 'AsyncIterable'.

      L28:      fieldResolver?: GraphQLFieldResolver<any, any>
      L29:  ): AsyncIterable<any>;

这是我的package.json

 {
      "name": "Test",
      "author": "test,
      "homepage": "http://test.com",
      "private": true,
      "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
      },
      "dependencies": {
        "@angular/common": "2.4.8",
        "@angular/compiler": "2.4.8",
        "@angular/compiler-cli": "2.4.8",
        "@angular/core": "2.4.8",
        "@angular/forms": "2.4.8",
        "@angular/http": "2.4.8",
        "@angular/platform-browser": "2.4.8",
        "@angular/platform-browser-dynamic": "2.4.8",
        "@angular/platform-server": "2.4.8",
        "@ionic/storage": "^1.1.9", …

我正在使用Ionic2,当用户选择要从popover打开的页面时,我想打开另一个页面,这是第一页的代码:

popvarSpecialsArr = ['Home','My Account','Cart','Wishlist','My Orders'];
presentPopoverSpecial(myEvent) {
let popover = this.popoverCtrl.create(MorePopverPage, {popvarArr: this.popvarSpecialsArr});
console.log('my event', myEvent);
popover.present({
  ev: myEvent
});

}

这个来自popover页面的代码:

popvarArr;

constructor(public navCtrl: NavController, public navParams: 
NavParams,public viewCtrl: ViewController) {
this.popvarArr = this.navParams.get('popvarArr');
console.log(this.navParams.get('popvarArr'));
}

openPage(page) {
console.log(page);
if(page == 'Home') {
  console.log('inside home');
  this.navCtrl.setRoot(HomePage);
} else if(page == 'My Account') {
  this.navCtrl.setRoot(MyAccountPage);
} else if(page == 'Cart') {
  this.navCtrl.setRoot(CartPage);
} else if(page == 'Wishlist') {
  this.navCtrl.setRoot(WishlistPage);
} else if(page == 'My Orders') {
  this.navCtrl.setRoot(MyOrdersPage);
} else …

我想要在3x3表格中显示一系列项目,如下所示:

为了实现这一点,我将我的数组切成3个3的数组并显示如下:

<ion-grid no-padding class="home-gallery">
    <ion-row *ngFor="let row of items | async">
        <ion-col *ngFor="let item of row">
            <div class="products_list">
                <div class="products_list_img">
                    <img [src]="item.previewImage" (click)="showItem($event, item)"/>
                </div>    
            </div>
        </ion-col>
    </ion-row>
</ion-grid>

有没有办法在保持阵列扁平化的同时实现这种显示？

如何ion-input在Ionic 2中自动换行组件？

这有效:

<ion-item text-wrap>
    <div>A really realll really really loooooooonnngg text.</div>
</ion-item>

但这不是:

<ion-item text-wrap>
    <ion-input
    type="text"
    id="commuterLocation"
    name="commuterLocation"
    readonly=true
    placeholder="Enter your location"
    (focus)="onCommuterLocationFocus()"
    [(ngModel)]="_commuterLocation.description"></ion-input>
</ion-item>

编辑1: 当我text-wrap在ion-item带有常规html元素的指令上使用该指令时,元素的内容按预期换行.但输入文本ion-input不...我该如何解决这个问题？在此先感谢您的帮助.

我正在使用Ionic 3的警报，并且遇到警报堆积的问题。我正在使用网络插件检查用户是否已连接到网络（WiFi / 2G / 3G等），其想法是每次用户下线或上线时都会触发警报。

this.connectSubscription = this.network.onConnect().subscribe(() => {
  console.log('network connected!');
  let connectedToInternet = this.alertController.create({
    subTitle: 'Connected to Internet',
    buttons: ['OK']
  });
  connectedToInternet.present();
});

this.disconnectSubscription = this.network.onDisconnect().subscribe(() => {
  let noInternetAlert = this.alertController.create({
    subTitle: 'No Internet Connection. Please enable Wifi or Mobile data to continue.',
    buttons: ['OK']
  });
  noInternetAlert.present();
});

当前行为：如果用户多次断开连接并重新连接，则对于网络中的每个更改实例，都会显示一个警报，并且警报会堆积在视图上，直到用户手动解除警报为止。

必需的行为：如果用户多次断开连接并重新连接，则对于网络变化的每个实例，都应显示一个警报，而较旧的警报将自动被关闭，因此在任何给定的时间点，不会向用户显示多个警报视图上任何警报的实例。

我正在使用离子版3.9.2

我想要实现的是我想将离子应用程序的所有默认字体更改为我给定的自定义字体.

谷歌搜索后,我明白我必须设置app.scss文件夹中存在的字体外观app

这是我使用的代码:

@import url('https://fonts.googleapis.com/css?family=Raleway');
$font-family-base: "Raleway", sans-serif !default;

然而,即使这样做后,我无法更改整个应用程序的字体,因为它没有反映在应用程序中.

我将我的第一个离子应用程序提交给App Store进行审核.

基本上,Apple拒绝了审核,因为他们无法登录我的应用程序.他们说,当他们点击用户名文本字段时,键盘没有显示(他们提供了截图,我注意到他们正在使用模拟器进行测试).

我一直在研究iOS模拟器上有一个错误,修复问题的方法是切换软件键盘,或取消选中"连接硬件键盘".

我和Apple有很多反复的消息,试图解释这个,但是他们回答说它仍然没有用.

老实说,我不确定他们是否遵循键盘步骤.据我所知,它可以在物理设备上正常工作,在iOS模拟器中切换键盘时也能正常工作.

有没有解决方案,或其他方法来解决这个问题？

在离子1中,我将基于模块的文件夹分开

user
  html
  - user-list.html
  - user-login.html
  - user-profile.html
  - user-edit-profile.html

  scss
  - ....

那么,离子2是否遵循最佳的文件夹结构实践？

user-list
- user-list.html
- user-list.scss
- user-list.compoment.ts
- user-list.module.ts

user-login
...

user-profile
...

user-edit-profile
....

或者我应该创建一个用户模块文件夹作为所有用户页面的父文件夹？

我试图从我的离子卡两侧去除间距,使它们100%宽度.到目前为止,我已经尝试了所有我能想象的但是卡尔德拒绝设置为100%的宽度.到目前为止这是我的代码:

<ion-content class="Content">

 <ion-card  *ngFor='let rest of modifiedData' (click)="itemSelected(rest.PushPage)"  >
  <img src={{rest.image}}/>
  <ion-card-content>
    <ion-card-title>
     <h1>{{rest.name}}</h1> 
      </ion-card-title>
    <p>{{rest.text}}</p>
  </ion-card-content>
</ion-card> 


  <!-- floating button for maps page -->
   <ion-fab right bottom >
   <button ion-fab color="frosted" (click)="Locations()" mini><ion-icon name="pin"></ion-icon></button>
 </ion-fab>
</ion-content>

而我的css:

page-content {

    .scroll-content {
        padding-top: 0 !important;
    }

    .main-content {
        background-color: (darkish);
        box-shadow: 0px -1px 13px 1px rgba(0,0,0,0.3);
    }
    ion-card {
        background-color: #fff;
        width: 100%;
        margin: 0;
        margin-bottom: 25px;
        position: relative;
    }


    ion-item {
        background-color: #fff;
    }
}

任何帮助非常感谢!