标签: ionic2

我知道如何在Angular1 Ionic1中绘制.

在我的HTML中:

<img ng-src="{{image}}" style="width: 100%">
<canvas id="tempCanvas"></canvas>

在我的控制器中

var startimg="img/face.jpg";
$scope.image=startimg;

var canvas = document.getElementById('tempCanvas');
var context = canvas.getContext('2d');

var source =  new Image();
source.src = startimg;

canvas.width = source.width;
canvas.height = source.height;

console.log(canvas);

context.drawImage(source,0,0);

context.font = "100px impact";

textWidth = context.measureText($scope.frase).width;
if (textWidth > canvas.offsetWidth) {
    context.font = "40px impact";
}

context.textAlign = 'center';
context.fillStyle = 'white';             
context.fillText('HELLO WORLD',canvas.width/2,canvas.height*0.8);

var imgURI = canvas.toDataURL();

$timeout( function(){
    $scope.image = imgURI;
}, 200);

这段代码肯定会在人脸图像的顶部绘制HELLO WORLD文本.

但是,在Ionic2/Angular2中,它似乎不起作用.我甚document.getElementById('tempCanvas')至无法上班.

请帮忙. …

如何使用flex在avatar下集中这个跨度？

如果我删除跨度,则头像图像很好地集中,但是当我插入跨度时,即使display:block它显示在右侧也是如此.

这是我的HTML:

<ion-navbar *navbar>
    <ion-avatar item-center>
        <img src="img/bill-gates-avatar.jpg">
        <span>Bill Gates</span>
    </ion-avatar>
</ion-navbar>
<ion-content padding>
    Content here...
</ion-content>

那是我的SCSS:

.tabs {

    ion-navbar-section {
        min-height: 16.6rem;
    }

    .toolbar {
        min-height: 170px;
    }

    ion-avatar {
        display: flex;
        justify-content: center;
        align-content: center;
    }

    ion-avatar img {
        max-width: 8rem;
        max-height: 8rem;
        border-radius: 5rem;
        border: 2px solid color($colors, light);
    }
}

我在页面中设置了下拉菜单,但是如何获取选择的值.我用的代码

<ion-item>
                    <ion-label>MemberType</ion-label>
                    <ion-select [(ngModel)]="selectedvalue" #item >
                    <ion-option *ngFor="let item of items" value="{{item.value}}" checked="{{item.checked}}">{{item.text}}</ion-option>
                    </ion-select>
                </ion-item>


items: Array<{ value: number, text: string, checked: boolean }> = [];

    this.items.push({ value: 1, text: 'Super Distributor', checked: false });
    this.items.push({ value: 2, text: 'Distributor', checked: false });
    this.items.push({ value: 3, text: 'Retailer', checked: false });
    this.items.push({ value: 4, text: 'End User', checked: false });

我正在使用内容可编辑的div元素作为ionic2 app的输入文件.它适用于浏览器和Android设备,但ios设备.

<div class="textarea" contenteditable="true" data-placeholder="Add emails"></div>

.ie-textarea {
    font-size:      fonts(ft-med) + .2;
    white-space:    normal;
    word-wrap:      break-word;
    min-height:     50px;
}

.ie-textarea:empty:before {
    content:    attr(data-placeholder);
    display:    block;
    color:      clr(grey-light);
}

我在由IBM MobileFirst Platform 8.0(mfpdev verion 8.0.0-2016070716)Beta 提供支持的Ionic 2(v 2.0.0-beta.32)应用程序中创建了一个提供程序.以下是代码:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class EmployeeService {
  data: any;

  constructor() {
    this.data = null;
  }

  load() {
    console.log('--> called employee service');
    if (this.data) {
      // already loaded data
      return Promise.resolve(this.data);
    }

    // don't have the data yet
    return new Promise(resolve => {
    let dataRequest = new WLResourceRequest("/adapters/messangerAdapter/getEmployeeRating",WLResourceRequest.GET);
      /*dataRequest.send().then((response) => {
        console.log('--> adapter response recieved', response.responseJSON.results);
        this.data = …

这就是我想要做的.

• 将组单选按钮放在Ionic2弹出菜单中.
• 这些选项实际上是控制内容将加载的JSON文件.
• 用户选择一个选项,关闭弹出窗口,内容将在页面中相应更新.

我不确定如何将Ionic2 Popover中的值传递给它的父组件.如果我理解正确的话Ionic2的Popover是一个儿童组件.但是我不知道如何传递[(ngModel)]价值.

我知道这里看起来很混乱......好吧,如果只有某人能够做出一个简单的例子来说明如何将值从PopOver传递给Page ...

所以...这一切都在一个文件中:

import {Component, Injectable, Input, Output, EventEmitter} from '@angular/core';
import {ViewController, NavController, Popover, Content, Events, NavParams} from 'ionic-angular';
import {CardService} from '../../providers/card-service/card-service';
import {LangService} from '../../providers/lang-service/lang-service';
import {GlobalService} from '../../providers/global-service';   

Popover组件:

@Component({template: `
    <ion-list  radio-group [(ngModel)]="selected"  (ionChange)="loadc(selected)"> 

        <ion-item  *ngFor="let chapter of menuArray">
            <ion-label>{{chapter.ctitle}}</ion-label>
<ion-radio value="{{chapter.cchap}}" ></ion-radio>
        </ion-item>
    </ion-list>

        `,
    providers: [CardService, LangService, GlobalService],
directives: [LangService]
})

@Injectable()
export class ChapterService{
private chpselected : any;
private menuArray: any;
    constructor(
    private viewCtrl: …

我需要创建多个复选框选择框,在框内有分组标签.例

-Appetizer:

- -沙拉

- -等等

-主菜:

- -牛扒

- -等等

-沙漠:

- -冰淇淋

- -等等

这是我的代码:

<ion-select [(ngModel)]="food" multiple="true">
                        <ion-label>Toppings</ion-label> <!-- I want to create group label in here -->
                        <ion-option>Bacon</ion-option>
                        <ion-option>Black Olives</ion-option>
                        <ion-option>Extra Cheese</ion-option>
                        <ion-option>Mushrooms</ion-option>
                        <ion-option>Pepperoni</ion-option>
                        <ion-option>Sausage</ion-option>
 </ion-select>

Run Code Online (Sandbox Code Playgroud)

如何在离子选择内创建分组标签？谢谢..

我有带3个按钮的ionic-item-sliding指令.2(A和B)向左滑动时出现,右侧滑动1(按钮C).

我想实现当我真正将项目拖到最右边时触发按钮C下的函数的行为.

ionic2 hompage上的文档以此代码片段为例

ondrag(event, item) {
  let percent = event.getSlidingPercent();
  if (percent > 0) {
    // positive
    console.log('right side');
  } else {
    // negative
    console.log('left side');
  }
  if (Math.abs(percent) > 1) {
        this.navCtrl.push(NextPage,{param:item},{ animate: true, direction: 'forward' })
  }
}

使用它

<ion-item-sliding *ngFor="let item of items "(ionDrag)="ondrag($event, item)"></ion-item-sliding>

我得到的行为是,当我滑动太远时,它会多次调用并推送页面(我猜多少事件和我一样)

有关如何正确实现这一点的任何建议？

谢谢!

我有这个:

  doAlert() {
      let alert = this.alertCtrl.create({
           title: 'My Popup',
           message: this.updateStatus
      });
      alert.present()
  }

  this.updateStatus = 'Start';
  this.doAlert();

  setTimeout(() => {
      this.updateStatus = 'Finish';
      console.log('Done Timeout');
  }, 1000);

警报仅显示如下图所示,即使是console.log也是触发器.

如何触发它将消息更改为完成？

与标题中一样,我想更改所选标签的背景颜色.我没有在文档中找到允许这个的任何变量.(http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/).怎么实现呢？