标签: ionic3

如何从ion-select选项中获取值

我有一个名为options的对象数组.

这是我的HTML代码

    <ion-item>
        <ion-label>place</ion-label>

        <ion-select [(ngModel)]="place" (click)="optionsFn(item);">
          <ion-option value="item" *ngFor="let item of options">{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option> 
        </ion-select>
      </ion-item>

{{salespriceOp}}

{{quantityOp}}
Run Code Online (Sandbox Code Playgroud)

这是我的.ts文件代码

product_option_value_idOp
  priceOp
  salespriceOp
  quantityOp
  skuOp
  nameOp

  options =  [
          {
            "product_option_value_id": "45",
            "name": "Bangalore Auto",
            "quantity": "12",
            "sku": "56876",
            "price": "100.00",
            "salesprice": "50"
          },
          {
            "product_option_value_id": "51",
            "name": "Hyderabad Auto",
            "quantity": "23",
            "sku": "56543",
            "price": "200.00",
            "salesprice": "60"
          },
          {
            "product_option_value_id": "52",
            "name": "Delhi Auto",
            "quantity": "14",
            "sku": "98767",
            "price": "300.00",
            "salesprice": "80"
          }
        ];
  constructor(public navCtrl: NavController) { …
Run Code Online (Sandbox Code Playgroud)

typescript ionic-framework ionic2 ionic3 angular

11
推荐指数
1
解决办法
4万
查看次数

Ionic2/Angular2 - 读取自定义配置文件

我正在开发一个ionic2项目,我需要创建一个新的自定义JSON配置文件.我发现了一些教程来创建一个并通过http.get访问它,但我认为通过get请求调用它是很奇怪的.我希望它在根文件夹(所有配置JSON都是)中,我直接打开/读取文件.

我不知道是否可能,甚至推荐?这就是为什么我在这里张贴有一些意见和解决方案:)

谢谢

typescript ionic-framework ionic2 ionic3 angular

11
推荐指数
1
解决办法
6135
查看次数

Ionic 2 Tabs位于顶部和底部

我想制作一个tabs component屏幕顶部有一些标签,底部有一些标签,是否有办法实现这一目标?

像这样的东西:

在此输入图像描述

我尝试使用两个实例,但我无法实现它,我想它们之间的同步将非常困难.

有任何想法吗?

tabs components ionic-framework ionic2 ionic3

11
推荐指数
2
解决办法
1万
查看次数

标签和组单选按钮水平对齐

我有一个标签和组单选按钮(两个),我想让它像图片中一样水平对齐.

在此输入图像描述

我试过这段代码:

`<ion-row radio-group [(ngModel)]="Sexe">
  <ion-col>
      <ion-item>
        <ion-label color="primary">Sexe</ion-label>
        <ion-radio value="Mr"></ion-radio>
        <ion-radio value="Mme"></ion-radio>
      </ion-item>
  </ion-col>
</ion-row>`
Run Code Online (Sandbox Code Playgroud)

还有这段代码:

`<ion-row radio-group [(ngModel)]="Sexe">
  <ion-col>
      <ion-item>
        <ion-label color="primary">Sexe</ion-label>
      </ion-item>
      <ion-item>
        <ion-radio value="Mr"></ion-radio>
      </ion-item>
      <ion-item>
          <ion-radio value="Mme"></ion-radio>
      </ion-item>
  </ion-col>
</ion-row>`
Run Code Online (Sandbox Code Playgroud)

但我没有我想要的结果.

typescript ionic-framework ionic2 ionic3 angular

11
推荐指数
1
解决办法
9822
查看次数

离子3弹出窗口不会出现在按钮旁边

我已经做了100多年的时间,它按预期工作,但只是这种情况.

popover看起来像:

<ion-content style="padding:5px">
  <ion-label class="menu-options-link" (click)="doneTask()">Accept New Leads</ion-label>
</ion-content>
Run Code Online (Sandbox Code Playgroud)

启动popover的页面如下所示:

<ion-card class="dashboard-widget-layout dashboard-widget">
  <ion-card-header class="dashboard-widget-card-header">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-label class="dashboard-widget-header">New Leads</ion-label>
        </ion-col>
        <ion-col col-auto>
          <ion-icon name="ios-more" style="zoom:1.5"
Run Code Online (Sandbox Code Playgroud)

(点击)= "showOptions($事件)">

推出的是

showOptions(myEvent){
  //alert('hey')
  var popover = this.leadOptionsPopup.create(LeadOptionsPage, {}, { cssClass: 'options-popover'});    
  popover.present({
    ev: myEvent
  }); 
}
Run Code Online (Sandbox Code Playgroud)

这应该这样做,但popover只是相对于图标走了.

截图,看看它是如何打开的

popover ionic3

11
推荐指数
2
解决办法
2065
查看次数

如何在实际图像加载到Ionic 2或3应用程序之前显示占位符图像

美好的一天,

我正在研究Ionic应用程序,我正在从JSON提要中动态加载图像.我希望当从外部URL拉入图像时,占位符图像显示在其位置,此后,占位符图像应该在加载后由"真实"图像替换.

我目前的情况的一个例子是:

<ion-card *ngFor="let item of items"...
 <img [src]="item.picture" />
Run Code Online (Sandbox Code Playgroud)

感谢和问候.

typescript ionic-framework ionic2 ionic3 angular

11
推荐指数
2
解决办法
7908
查看次数

来自AndroidManifest.xml的属性应用程序@ allowBackup value =(false)也出现在[:barcodescanner:] AndroidManifest.xml值=(true)

我正在尝试将我的离子3应用程序清单中的allowBackup属性设置为false但gradle会抱怨以下错误:

来自AndroidManifest.xml的属性应用程序@ allowBackup值=(false):4:18-45也出现在[:barcodescanner:] AndroidManifest.xml:12:9-35 value =(true).建议:在AndroidManifest.xml:4:5-11:19中添加'tools:replace ="android:allowBackup"'来覆盖.

使用config.xml文件中的下一行设置allowBackup = false

<platform name="android"> <edit-config file="AndroidManifest.xml" target="/manifest/application" mode="merge"> <application android:allowBackup="false"/> </edit-config> </platform>
Run Code Online (Sandbox Code Playgroud)

我在我的离子3应用程序中使用条形码扫描仪.(回复:[ https://github.com/phonegap/phonegap-plugin-barcodescanner]建议在https://ionicframework.com/docs/native/barcode-scanner/])

请帮我.谢谢!

android android-manifest ionic3

11
推荐指数
1
解决办法
7173
查看次数

Ionic - 只有在Android 5模拟器中运行时才会出现意外的令牌ILLEGAL

我正在开发一个Ionic应用程序,我面临以下问题:

Unexpected token ILLEGAL
Run Code Online (Sandbox Code Playgroud)

奇怪的是,它只发生在我用Genymotion模拟器运行Android 5和bellow时,使用离子cordova运行android.如果我在Android 6及更高版本中运行相同的代码,则应用程序可以正常运行.

控制台说问题接近'{'字符:

在此输入图像描述

我尝试重写这段代码,但它只是将错误更改为另一行,如果我删除所有空格.

这里奇怪的是它只发生在模拟器中运行时,所以我怀疑项目配置中的某些东西,比如webpack.

离子版:3.19.0 cordova-android:^ 6.2.3

这是我的package.json

{
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "5.0.1",
        "@angular/compiler": "5.0.1",
        "@angular/compiler-cli": "5.0.1",
        "@angular/core": "5.0.1",
        "@angular/forms": "5.0.1",
        "@angular/http": "5.0.1",
        "@angular/platform-browser": "5.0.1",
        "@angular/platform-browser-dynamic": "5.0.1",
        "@ionic-native/camera": "^4.4.2",
        "@ionic-native/core": "4.3.2",
        "@ionic-native/date-picker": "^4.4.2",
        "@ionic-native/facebook": "^4.4.2",
        "@ionic-native/globalization": "^4.4.2",
        "@ionic-native/google-plus": "^4.4.2",
        "@ionic-native/onesignal": "^4.4.2",
        "@ionic-native/splash-screen": "4.3.2",
        "@ionic-native/status-bar": "4.3.2",
        "@ionic/storage": "^2.1.3",
        "@ngx-translate/core": "^9.0.1",
        "@ngx-translate/http-loader": "^2.0.0",
        "cordova-android": "^6.2.3",
        "cordova-plugin-camera": …
Run Code Online (Sandbox Code Playgroud)

android cordova typescript ionic-framework ionic3

11
推荐指数
1
解决办法
717
查看次数

离子3:无法找到管道''

关于这个问题我似乎没有任何错误.我已经在app.module.ts中导入并将其放入'声明'中.

在app.module.ts中

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

//ionic-native
import { NativeStorage } from '@ionic-native/native-storage';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

//pipe
import { HoursMinutesSecondsPipe } from '../pipes/hours-minutes-
seconds/hours-minutes-seconds';

@NgModule({
declarations: [
MyApp,
HoursMinutesSecondsPipe
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
  platforms: {
    android: {
      tabsPlacement: 'top'
    }
  }
}),
],
bootstrap: [IonicApp],
entryComponents: …
Run Code Online (Sandbox Code Playgroud)

pipe typescript ionic-framework ionic3 angular

11
推荐指数
1
解决办法
9150
查看次数

Ionic socialSharing插件无法在iOS上运行

Ionic社交共享插件无法在iOS上运行.错误响应返回"不可用".在Android上它按预期工作.我做错了吗?

// share functions parse accepts 'app' parameter
this.socialSharing.canShareVia(app, this.property.heading, '', '', this.property.link).then(res => {
      this.socialSharing.shareVia(app, this.property.heading, '', '', this.property.link);
}).catch(res => {
      this.gApp.hideLoading();
      this.gApp.showAlert('error', res);
});

// app name is parsed from html
<a (click)="shareVia('facebook')">facebook</a>
...    
<a (click)="shareVia('viber')">viber</a>
Run Code Online (Sandbox Code Playgroud)

cordova typescript ionic-framework cordova-plugins ionic3

11
推荐指数
1
解决办法
1641
查看次数