标签: ionic2

我熟悉位于npm的一个包用于将格里高利日期转换为波斯语(jalali),但我不知道如何在离子2角2项目中使用它.

贾拉利最新

或角度为1的此包:

ADM-dateTimePicker的

是否可以将此包转换为角度2？任何的想法？或者教程是受欢迎的......

我正在尝试使用背景颜色ng-style.列的每一行都是使用生成的ngFor.每个项目都有不同的背景颜色

<ion-item class="category-list" *ngFor="let item of character['items']">
   <ion-avatar item-left>
  <i class="icon" [ngStyle]="{'background-color': item.bgcolor}"><img src="../img/icons/category/{{item.img}}.png"></i>
  </ion-avatar>
    <h2>{{item.category}}</h2>
  </ion-item>

而Typescript.ts:

 var characters = [
  {
    name: 'Gollum',
    quote: 'Sneaky little hobbitses!',
   items: [
      { bgcolor: 'fb9667', img: 'airTicket', category: 'Air tickets' },
      { bgcolor: '000000', img: 'airTicket', category: 'Beauty/Fitness'},
      { bgcolor: '0b9660', img: 'airTicket', category: 'Bike'}
    ]
  },
]

不知道如何应用颜色代码列表.

我在这里切换:

<ion-toggle (ionChange)="notify(value)"></ion-toggle>

当我点击这个时我想调用方法notify通过参数传递toggle值.我如何获得切换值？

谢谢!

我需要在离子2中使用带有标签的海关图标.

此外,如果选中该选项卡,我需要更改标题颜色和图标.

例:

离子标签

我正在开发离子2应用程序.我正在尝试获得高质量的图像,然后将其调整为头像照片.

我的代码:

 _FBUserProfile() {

return new Promise((resolve, reject) => {
  Facebook.api('me?fields=id,name,email,first_name,last_name,picture.width(600).height(600).as(picture_small),picture.width(360).height(360).as(picture_large)', [])
    .then((profileData) => {
      console.log(JSON.stringify(profileData));
      return resolve(profileData);
    }, (err) => {
      console.log(JSON.stringify(err));
      return reject(err);
    });
});

}

但是,照片质量不好,因为我觉得我在这行调整大小时出了问题:

picture.width(600).height(600).as(picture_small),picture.width(360).height(360).as(picture_large)', [])

如何才能获得高质量的照片？

我正在以角度2构建应用程序.我想在动态添加的html元素中添加click事件.我定义了一个字符串(contentString),在这个字符串中我定义了html元素.

var contentString = '<b>' + this.mName + '</b><br/> ' + this.mObject.category + '<br/> Click here for more information <button (click)="navigate()">Navigate here</button>'; 

这个字符串放在一个像这样的html元素中:

var boxText = document.createElement("div");
    boxText.innerHTML = contentString;

虽然当我检查元素时,它已定义了click事件,但它没有触发.

点击它应该控制台日志

navigate() {
console.log("eeeehnnananaa");
}

但这不起作用.谁有解决方案？

我希望在<ion-input>进入页面时将焦点设置在我的上面

这是我的打字稿代码:

import { Component, Input, ViewChild,ElementRef,Renderer } from '@angular/core';
import { NavController, PopoverController, NavParams, ViewController, ModalController } from 'ionic-angular';

@Component({
  selector: 'page-comments',
  templateUrl: 'comments.html'
})
export class CommentsParentPage {
    @ViewChild('input') myInput;

    constructor(public navCtrl: NavController,private renderer: Renderer, 
                private elementRef: ElementRef, public modalCtrl: ModalController) {
    }

    ionViewLoaded() {

       setTimeout(() => {
          let element = this.elementRef.nativeElement.querySelector('input');
          this.renderer.invokeElementMethod(element, 'focus', []);
       },150);
    }

}

这就是我对我的html文件做的:

 <ion-item>
      <ion-input set-focuser type="text" placeholder="Write Your Comments" [(ngModel)]="addComment"></ion-input>

    </ion-item>

每当我进入我的应用程序的这个页面时,我希望打开键盘并将焦点设置为开启 ion-input

我的config.xml包括:

<preference …

看我的

我在离子卷轴中有10个名字,但它像段落一样进入下一行.

这是我的.html代码.

<ion-scroll scrollX="true" style="width:100vw; height:50px" >
        <ion-row class="headerChip">
          <div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'">
          <ion-chip  (click)="changeData(tabName)">
          <ion-label  >{{tabName.languagename}}</ion-label>
          <div></div>
          </ion-chip>
          </div>
        </ion-row>
      </ion-scroll>

这是我的CSS

.headerChipGray{
    ion-chip.chip.chip-md{
        margin: 2px 2px 2px 2px;
        border-radius: 10px;
        border: 1px solid gray;
        background: white;
    }
    ion-chip.chip.chip-ios{
        margin: 2px 2px 2px 2px;
        border-radius: 10px;
        border: 1px solid gray;
        background: white;
    }
}

.headerChipGreen{

    ion-chip.chip.chip-md{
        margin: 2px 2px 2px 2px;
        border-radius: 10px;
        background: white;
        color: #A80C50;
        border: …

我是Ionic2或Ionic的新手.我设置了一个新项目,并希望在页面底部设计一个小菜单.我没有在这个项目上做任何其他事情,并试图模仿教程视频的步骤.但是当我在按钮上使用icon-only指令时,按钮的背景只会变小一些.背景不会消失.

<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <button ion-button icon-only>
      <ion-icon name="home"></ion-icon>
    </button>
    <button ion-button icon-only>
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-toolbar>
</ion-footer>

这是我的代码.我希望你能帮助我.

我想用离子2创建这样的设计 - > https://codepen.io/Floky87/pen/bVopyZ

这是一个具有隐藏/显示密码的登录功能.

这是我的HTML代码

<ion-header>

  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-item>
      <ion-label floating primary>Username</ion-label>
      <ion-input type="text"></ion-input>
</ion-item> 
<ion-item>
      <ion-label floating primary>Password</ion-label>
      <ion-input type="password"></ion-input>
      <ion-icon name="eye" item-right (click)="showHide()"></ion-icon>
</ion-item> 
</ion-content>

这是结果 - > http://prntscr.com/gz12xg

这是我的.ts代码

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }
  showHide() {
    console.log('hi');
  }

}

问题是,眼睛图标不可点击.没有来自控制台的日志.

当我点击眼睛图标时,它只允许我从密码字段输入. …