标签: ionic2

我已将值存储在两个数组中以在单个离子列表中进行迭代.Billerstatusstate和Billerstatusnamelst是两个阵列.

我尝试了以下迭代

<ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

和

<ion-list ion-item *ngFor="let stat of Billerstatusstate" *ngFor="let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

它取两个局部变量的第一个迭代值.

我错过了什么？

有没有其他方法可以将两个值存储在单个数组中,并使用ngFor将其拆分到View端.

对于我,ionic.config.json我有:

{
  "name": "TSICMobile",
  "app_id": "6e4680fa",
  "typescript": true,
  "v2": true,
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://192.168.0.105:8081/api"
    }
  ]
}

在我的提供商(user-data.ts基于Ionic2会议应用程序)中,我有例如:

login(credentials) {
    return new Promise((resolve, reject) => {
        this.http.post(
            '/api/Login',
            JSON.stringify(credentials),
            { headers: this.contentHeader }
        ).subscribe(res => {
            console.log('api/Login return');
            this.data = res.json();
            if (this.data.authenticated === true) {
                this.storage.set('TSIC_USER_PROFILE', JSON.stringify(this.data.tsiC_USER_PROFILE));
                this.storage.set('TSIC_USER_ROLES', JSON.stringify(this.data.listRoles));
                this.storage.set('tsic_id_token', this.data.token);
                this.events.publish('user:login');
                resolve(true);
            } else {
                reject('not authenticated');
            }
        }, error => {
            console.log('api/Login failed');
            reject(error);
        });
    });
}

在跑步时:

ionic serve …

我想在一个内部显示一个背景图像/加载微调器div,它将在其中加载一个图像,一旦它完全加载,图像将显示如下:

   <div style="background-image:url('imageThatWillAppearBeforeLoad')"></div>

演示(在jQuery中)

如何使用Angular2/Ionic2？

在我使用的Angular 2/Ionic 2(final/rc0)项目中的组件中:

protected contentTarget: ViewContainerRef;

ngOnInit() {
        this.contentTarget.createComponent(componentFactory);
    }

AoT编译器说:

Error at ....: Property 'contentTarget' is protected and only accessible within class 'IncludeTemplateComponent' and its subclasses.

变量(属性)不会在整个项目中的任何其他位置使用.

那么......任何人都可以对此有所了解,是createComponent工厂将contentTarget变量传递给它的子节点,或者为什么编译器不喜欢这里受保护？现在所有Angular2中的受保护变量都是"被禁止的"吗？

版本:Cordova:6.3.1,Gulp CLI:1.2.2,离子框架:2.0.0-rc.0,Ionic CLI版本:2.1.0

我在ionic2应用程序中使用ng2-charts.

进口不受import {ChartsModule} from "ng2-charts"; 而是import {ChartsModule} from "ng2-charts/components/charts/charts;"因为这个(问题#440)

我的整个app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ChartsModule } from 'ng2-charts/components/charts/charts';

import { MyApp } from './app.component';
import { EventsPage } from '../pages/events/events.component';
import { ChartComponent } from '../pages/chart/chart.component';
import { APICaller } from '../services/APICaller.service';
import { EventDetailComponent } from '../pages/event-detail/event-detail.component';
import { ParticipantDetail } from '../pages/participant-detail/participant-detail.component';
import { ParticipantFeedComponent } from …

我正在构建一个Ionic2应用程序。我正在尝试将图像URL转换为base64图像。我发现了这个我想利用的东西。

我有以下代码：

var imgUrl = 'https://www.google.de/images/srpr/logo11w.png';
let base64image = this.getBase64Image(imgUrl);
console.log(base64image);

和

public getBase64Image(imgUrl) {
    var img = new Image();
    img.src = imgUrl;
    img.setAttribute('crossOrigin', 'anonymous');
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

但是，它输出以下内容：

数据：，

我没有收到任何错误，但是期望使用base64映像。

我的代码一定不正确。任何人都可以建议如何将URL转换为base64图像吗？

谢谢

更新

感谢您对以下人员的反馈，我已按照他们的建议进行操作以加载图像。现在，我有以下代码：

public getBase64Image(imgUrl): Promise<string> {
    return new Promise<string>(resolve => {
        var img = new Image();
        img.src = imgUrl;
        img.setAttribute('crossOrigin', 'anonymous');
        img.onload = …

我的离子2应用程序中有一个简单的功能,可以将文件上传到我的firebase存储服务器.它从相机中抓取base64编码的图像字符串,但是当我不尝试强制它时content-type,它默认为application/octet-stream.当我尝试将元数据添加到putString()方法时,我收到错误.

有谁知道我怎么能这样做putString？

这是我目前的功能:

uploadProfilePhoto(file) {
    this.storage.get('user').then(user => {
      let id = user.id;

      var metadata = {
        contentType: 'image/jpeg',
      };

      let userProfileRef = this.fbStorage.ref(`/users/${id}/profile_photo/profile_photo.jpg`);
      userProfileRef.putString(file, metadata).then(snapshot => {
      }).catch(error => {
      });
    })
  }

我正在开发一个离子2应用程序,它基本上是一个购物车,Woocommerce作为后端.使用REST API,情况非常顺利:我可以在应用程序中浏览产品并为客户创建订单.

但现在我陷入了支付处理的困境.该应用程序将只使用PayPal,并且我想使用PayPal插件.我还没有测试过,但看起来非常简单:你传递购买细节(价格,货币,描述......),然后渲染PayPal用户界面.

我可以向PayPal用户界面提供所有这些信息,但它有一个显而易见的问题:如何将其与相关的Woocommerce订单集成？如果支付成功,我如何做到这一点,Woocommerce注册它？

Woocommerce安装已启用PayPal.你可以在网站上使用PayPal就好了.

现在,我很确定它与PayPal的IPN有关.猜测一下,也许我应该以某种方式将订单ID传递给PayPal插件,那么IPN会将同样的订单ID传递给Woocommerce吗？可能是类似的东西,但我找不到适当的文件.

如果你搜索"离子2 woocommerce paypal",你会看到很多人出售相同的东西的源代码.我可以买一个并研究它,但我宁愿找到关于这个特定动作的文档.

是否可以在离子选择中添加图标到ion-option？就像是

<ion-select  name="type">
        <ion-option value="bar"><ion-icon name="stats"></ion-icon>Bar</ion-option>
        <ion-option value="pie"><ion-icon name="pie"></ion-icon>Pie</ion-option>
      </ion-select>

使用Ionic Tabs文档中tabs.ts中的select（）方法进行了尝试。但是似乎当我尝试运行它时，它说“ select is undefined”，当我尝试使用console.log（tabs）时，我发现viewChild实际上为空/未定义。尝试搜索未定义viewChild的原因，但无法真正理解为什么。

链接到离子选项卡文档：https : //ionicframework.com/docs/api/components/tabs/Tabs/

tabs.html

<ion-tabs #tabs>
  <ion-tab [root]="tab1Root" tabTitle="Request" tabIcon="alert"></ion-tab>
  <ion-tab [root]="tab2Root" [rootParams]="detailParam" tabTitle="Pending" 
   tabIcon="repeat"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Completed" tabIcon="done-all"></ion-
   tab>
  <ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="person"></ion-tab>  
</ion-tabs>

tabs.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, AlertController, Tabs } from 'ionic-
angular';
import { PendingJobPage } from '../pending-job/pending-job';
import { CompletedJobPage } from '../completed-job/completed-job';
import { RequestPage } from '../request/request';
import { ProfilePage } from '../profile/profile';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage …