标签: ionic2

我正在使用离子2本机ImagePicker插件

ImagePicker.getPictures({
  maximumImagesCount: 1
}).then((results) => {
    vm.sourcePath = results[0]
    console.log(vm.sourcePath)
    // file:///Users/aymanjitan/Library/Developer/CoreSimulator/Devices/E937952F-7FAA-4DBB-8E23-80B04F3B6C72/data/Containers/Data/Application/FCF9097F-67BD-4DAD-AE30-D2F1839C0374/tmp/cdv_photo_003.jpg
})

现在我尝试使用image src属性访问此图像

<img [src]='sourcePath' />

甚至硬编码路径

<img src="file:///Users/aymanjitan/Library/Developer/CoreSimulator/Devices/E937952F-7FAA-4DBB-8E23-80B04F3B6C72/data/Containers/Data/Application/FCF9097F-67BD-4DAD-AE30-D2F1839C0374/tmp/cdv_photo_003.jpg"

但这没有任何表现.

知道

<apan>{{sourcePath}}</apan>

正确显示路径!

我尝试使用离子原生文件插件将图像转换为base64

var sourceDirectory = vm.sourcePath.substring(0, vm.sourcePath.lastIndexOf('/') + 1);
var sourceFileName = vm.sourcePath.substring(vm.sourcePath.lastIndexOf('/') + 1, vm.sourcePath.length);
File.readAsArrayBuffer(sourceDirectory, sourceFileName).then((fileData)=> {
  console.log(fileData)
}, () => {
  console.log('error')
})

但是这会引发错误

我在config.xml中添加了这些白名单规则

<access origin="*"/>
<allow-navigation href="*"/>
<allow-navigation href="file://*/*"/>

但仍然没有运气

我虽然可能返回的文件路径不正确所以我把它放在我的浏览器中,它显示了应该选择的图像

那么如何在iOS上使用ionic 2访问本地图像(9.3)

在我的离子v2应用程序是一个按钮,无论我输入哪个文本,它总是大写.我不想添加css-utilities,因为我混合了大小写单词.

这是我的代码:

<button ion-button large block color="danger" (click)="openPage($event, 0)">
    This is my test Text.
</button>

我试图从按钮标签中删除所有属性,但这没有用.有什么建议？

使用Angular2管道slice我可以做这样的事情只显示我的前五个元素items.

<ion-item *ngFor='let item of items | slice:0:5">

如何使用变量而不是硬编码0和5？我想做这样的事情start并end在我的*.ts文件中定义.

<ion-item *ngFor='let item of items | slice:"start":"end"'>

我正在使用本机Ionic 2 Geolocation插件,它无法按预期工作.首先,我添加插件.

ionic plugin add cordova-plugin-geolocation

然后我导入插件并发出调用以获取当前位置.

import { Geolocation } from 'ionic-native';
import { Geoposition, GeolocationOptions } from 'ionic-native/dist/plugins/geolocation';

export class MyComponent {
 protected getLocation():Promise<Geoposition> {
  let options:GeolocationOptions = {
   maximumAge: 0, timeout: 5000, enableHighAccuracy: false
  };
  return Geolocation.getCurrentPosition(options)
   .catch(error => { console.error(error.message) };
 }
}

我还检查了我的AndroidManifest.xml.

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

我注意到总是超时超时.如果我把它保留为默认值(默认情况下超时设置为无穷大),那么大约20分钟后,我确实得到了一个地理位置.当然,20分钟并不理想.

我也试过使用navigator如下.但我得到了完全相同的结果.

navigator.geolocation.getCurrentPosition(
 position => {
  console.info('using navigator');
  console.info(position.coords.latitude);
  console.info(position.coords.longitude);
 },
 error => {
  console.warn('using navigator');
  console.warn(error.code);
  console.warn(error.message);
 },
 options
);

测试时Chrome …

我试过了\n 和 <br />,但遗憾的是没有工作!

这可能吗 ？

//Displaying toast to welcome user!
let user = this.currentUser();
//console.log(user);
let toast = Toast.create({
  message: 'Hi ' + user.email + '! <br/> Welcome to My App',
  duration: 5000,
  position: 'bottom'
});

toast.onDismiss(() => {
  console.log('Dismissed toast');
});

this.nav.present(toast);

我正在使用Ionic 2 ion-slides,并希望在其上调用一些实例方法.我有以下标记:

<ion-content padding>
  <ion-slides (ionDidChange)="onSlideChanged($event)" id="loopSlider">
   <ion-slide *ngFor="let slide of slides">
    <h1>{{ slide.title }}</h1>
  </ion-slide>
</ion-slides>
</ion-content>

我尝试使用以下代码(可能已过时)中找到的代码:

 private gotoSlide(index: number): void {
   this.sliderComponent = this.app.getComponent('loopSlider');
   this.sliderComponent.slider.slideTo(index);
  }

但this.app.getComponent('loopSlider');总是回来null.

有谁知道如何获取组件实例,以便我可以使用它的API？

请不要不喜欢标题判断,先阅读帖子.

我刚刚开始学习使用离子2框架的typescript和angular 2.

我正在添加引用typscript变量"newItem"的html元素,如下所示:

<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let item of todos" (click)="edit(item)">
      {{item}}
    </ion-item>
    <ion-item>test</ion-item>
    <div [innerHTML]=newItem></div>
  </ion-list>
</ion-content>

在我的组件的typescript类中,我有一个函数addTodo(),当按下右角的pluss/add图标时,它设置"newItem"的HTML:

  addTodo(){
    this.newItem = "<ion-item>test</ion-item>";
  }

由于某种原因,编译时会忽略"ion-item"标记,它只会向div元素插入"test".

申请将如下所示:

组件类:

所以我尝试将其添加到视图中:

<form *ngIf="editedItem">
  <ion-item><input [(ngModel)]="newItem" name="newItem">
    <ion-buttons end>
      <button ion-button color="danger" (click)="btnCancel()">Cancel</button>
      <button ion-button color="secondary" (click)="btnAdd()">Add</button>
    </ion-buttons>
  </ion-item>
</form>

但现在当我单击取消或添加时,页面需要重新加载.我知道我对[(ngModel)] ="newItem"做错了,我应该尝试将Angular变量传递给模型,还是有更好的方法来做到这一点.

编辑:将变量传递给(单击)函数,如@JoeriShoeby在下面的答案中所示.

在模型中:

export class TodosPage {

newItem = "";
todos: string[] = this.getTodos();
editedItem: boolean = false;

  constructor(public navCtrl: NavController) {

  }

  addTodo(){
    this.editedItem = true;
  }

  btnAdd(){
    this.todos.push(this.newItem);
    this.editedItem …

我试图在ios上设置Segment组件的样式,就像我的一个ionic2项目中的Material Design上的Segment的默认样式一样.

任何人都可以帮助提供理想的方法吗？

在Ionic 2网站上找不到任何信息.例如,使用Ionic库2.0.1创建项目.如何将其更新到Ionic library 2.1.0？什么是标准程序？ionic lib update已弃用.

我正在构建一个离子2应用程序,我可以用离子构建ios构建应用程序,我没有得到任何错误,但在xcode上,当我构建我的应用程序时,我得到以下错误.

Apple Mach-O链接器(id)错误链接器命令失败,退出代码为1(使用-v查看调用).

我怎样才能解决这个问题？

这是我的系统信息

Cordova CLI:6.5.0

离子框架版本:2.3.0

离子CLI版本:2.2.2

Ionic App Lib版本:2.2.1

Ionic App Scripts版本:1.1.4

ios-deploy版本:1.9.0

操作系统:macOS Sierra

节点版本:v6.9.4

Xcode版本:Xcode 8.3 Build版本8E162