ionic2 相关问题

Ionic 2 如何使 InAppBrowser 和其他插件在浏览器中运行时工作

我正在 Ionic 2 中创建一个应用程序，它使用现有网站的 Web API。要使用此 API，我必须通过以下方式进行身份验证（类似于 Facebook 登录）： 我调用 API 来...

离子发球 VS 离子发球 -c

我是 Ionic 新手，正在使用 Ionic 3.9.2 我有几个终端命令来为我的离子应用程序提供服务，但是，我没有发现这两个命令之间有任何区别。 离子服务 和 离子服务-c

Ionic 2/3：如何以编程方式取消选中复选框

我遇到一种情况，我必须在单击按钮时取消选中复选框。 这是我的复选框代码 我遇到一种情况，我必须单击按钮取消选中复选框。 这是我的复选框代码 <ion-checkbox [checked]="!isChecked" [disabled]="!isdisabled" (ionChange)="saveProfile($event)" [(ngModel)]="default"></ion-checkbox> 我尝试过使用！iChecked，但它不起作用。基本上，如果用户已经选中该复选框，我希望当您单击按钮时取消选中它（基于某些条件）。 <button class="button-m" (click)="navigateTo()" ion-button color="secondary"><ion-icon name="next">&nbsp;&nbsp;</ion-icon> Next </button> TS文件 import { Component, ViewChild } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { ToastController } from 'ionic-angular'; @Component({ selector: 'choose-profile', templateUrl: 'choose-profile.html', }) export class ChooseProfilePage { profileValue : string; isdisabled : boolean; isChecked :boolean; constructor(public navCtrl: NavController, public navParams: NavParams, private toastCtrl: ToastController) { } getSelectedProfile(val){ this.profileValue = val; if(this.profileValue!=undefined){ this.isdisabled = true; } else{ this.isdisabled = false; } } saveProfile(val){ if(val.checked==true) { this.presentToast( this.profileValue+"set as default profile") } else { this.presentToast("No default profile") } } presentToast(val){ let toast = this.toastCtrl.create({ message: val, duration: 3000, position: 'top' }); toast.present(); } navigateTo() { console.log("Next Clicked") this.isChecked == true; } } 您的代码有错误。 this.isChecked == true; 不会将 isChecked 变量设置为 true。它只是进行比较以检查 isChecked 是否为真。 您应该使用 = 而不是 ==。 将您的代码更改为以下内容： navigateTo() { console.log("Next Clicked") this.isChecked = true; } 不要使用 checked 属性作为绑定。您的输入与 ngModel 绑定，因此您需要做的是更改该字段的值。 修复 double equals 后您的代码有效，我感到很惊讶，因为模板正在寻找 default 并根据其值设置选中的属性。创建一个变量并绑定到它，然后更改它。我稍微重写了你的组件 然后在你的组件中： import { Component, ViewChild } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { ToastController } from 'ionic-angular'; @Component({ selector: 'choose-profile', templateUrl: 'choose-profile.html', }) export class ChooseProfilePage { public shouldSaveProfile = false; profileValue : string; isdisabled : boolean; constructor(public navCtrl: NavController, public navParams: NavParams, private toastCtrl: ToastController) { } getSelectedProfile(val){ this.profileValue = val; this.isdisabled = this.profileValue ? true : false; } saveProfile(val){ if(this.shouldSaveProfile) this.presentToast( this.profileValue+"set as default profile") else this.presentToast("No default profile") } presentToast(val){ let toast = this.toastCtrl.create({ message: val, duration: 3000, position: 'top' }); toast.present(); } navigateTo() { this.shouldSaveProfile = true; console.log("Next Clicked, should save value:", this.shouldSaveProfile); } } 您可以获取 IonCheckbox 实例的引用并将其设置为 check = false; 使用@ViewChild(): //.html <ion-checkbox #checkbox></ion-checkbox> //.ts @ViewChild('checkbox') el: IonCheckbox; this.el.checked = false; （之后您可能需要激活更改检测 - 在构造函数中注入 ChangeDetectorRef，然后运行 this.cdr.detectChanges() ） 或者从按钮的点击事件： //.html <ion-checkbox #checkbox></ion-checkbox> <ion-button (click)="removeCheck(checkbox)">click</ion-button> //.ts removeCheck(checkbox: IonCheckbox) { checkbox.checked = false; } （同样，可能需要检测变化。）

无法在iOS/Safari中使用ionic2/angular2正确显示日期时间

嗨，我在这里面临一个奇怪的问题，我正在获取动态数据，因为我还获取了日期和时间，并且我使用 chrome/android 中的日期管道在 html 中显示它，它运行良好，但是当我检查时...

如何制作ionic应用程序在手机和PC浏览器上使用？

我有一个由 ionic 2 设计的用于浏览器的网络应用程序 我的网络应用程序在移动屏幕上运行良好，但是可以使其如下图所示吗？ 如果可以的话我该怎么做？

如何删除输入类型中的默认颜色？

我已经创建了输入类型并创建了该框的边框，但是当我单击该按钮时，它显示默认颜色，但我不应该显示默认颜色 贝洛...

使用 ionic 包构建发送 google-services.json

由于我没有 Mac 和 iPhone，所以我唯一的选择是使用 Ionic Cloud 构建我的本机二进制文件。然而，首先我想尝试一下它，看看它如何与 Android 版本一起工作。 我的

ionic2 - 生成命令仅适用于使用 ionic-Angular >= 3.0.0 的项目

当我生成项目页面时，出现错误，但仍然可以生成此页面。

Azure AD 身份验证错误：用户取消了流程

我正在尝试使用 Azure AD 开发应用程序的用户身份验证功能，但在此过程中遇到一些问题。我已经使用 ADAL 库实现了客户端流身份验证...

API 错误：<_UIKBCompatInputView: 0x13fd1d7c0; frame = (0 0; 0 0); layer = <CALayer: 0x1c4426e40>> 返回 0 宽度，假设 UIViewNoIntrinsicMetric

我在装有 iOS 11 的 iPhone 7 plus 上使用 Ionic 3。当我运行我的应用程序时， 并填写一些文本/输入字段（基本表单），应用程序会冻结 几秒钟后变得完全没有反应（这不是......

如何设置ion-option的默认选择值？

我使用的是 Ionic v2，显示页面时无法设置所选值。 我使用的是 Ionic v2，显示页面时无法设置所选值。 <ion-select [(ngModel)]="company.form"> <ion-option *ngFor="let form of forms" [value]="form" [selected]="true">{{form.name}}</ion-option> </ion-select> 我也尝试过使用checked，但这也行不通。我怎样才能做到这一点？ Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.3 Ionic CLI Version: 2.1.13 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.45 如果处理默认值异或对象，最干净的方法是为 [compareWith] 属性提供比较函数。该函数在参数中接受 2 个对象，如果它们相等则返回 true。这样，模型中的现有值将在开始时被选择。如果在选择之外的模型中添加新数据，这也适用。 以下示例取自官方 Ionic 文档 <ion-item> <ion-label>Employee</ion-label> <ion-select [(ngModel)]="employee" [compareWith]="compareFn"> <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option> </ion-select> </ion-item> compareFn(e1: Employee, e2: Employee): boolean { return e1 && e2 ? e1.id == e2.id : e1 == e2; } 编辑：使用双等号使其适用于 Ionic 4（正如 Stan Kurdziel 在评论中建议的那样） 问题似乎是 ion-option 不喜欢 rc3 中的对象。我必须仅使用对象的 id 部分，并编写一个单独的更改处理程序来查找所需的对象并将其设置为值。 <ion-select [ngModel]="company.form.id" (ngModelChange)="companyFormSelected($event)" okText="Ok" cancelText="Mégsem"> <ion-option *ngFor="let form of forms" [value]="form.id" [selected]="form.id == company.form.id">{{form.name}}</ion-option> </ion-select> 还有变更处理程序： companyFormSelected(newform) { let selectedForm = this.forms.find((f)=>{ return f.id === newform; }); this.company.form=selectedForm; } 这似乎是 rc3 中的一个错误，但我不知道在哪里可以报告错误。我确实在离子论坛上打开了一个主题。 <ion-select [(ngModel)]="name">// binding the value available from ts file <ion-option *ngFor="let form of forms; let idx = index" [value]="form.name" selected="{{(idx==0).toString()}}">{{form.name}}</ion-option> </ion-select> 在你的 ts 文件中 name = this.forms[0].name //assign the variable name to the first index of your array 这对我有用。 在 HTML 中： <ion-select [(ngModel)]="company.form"> <ion-option value="frm1"> Form 1 </ion-option> <ion-option value="frm2"> Form 2 </ion-option> </ion-select> 在 ts 中： company = { form:null }; constructor(){ this.company.form = "frm1"; } <ion-select ([ngModel])="dropdown1"> <ion-select-option value="1">Item1</ion-select-option> <ion-select-option value="2">Item2</ion-select-option> </ion-select> 以下内容将不起作用： dropdown1 = 2; 但是以下方法会起作用： dropdown1 = 2 + ""; 选择选项值被视为字符串，因此您应该将字符串值分配给模型变量，以便比较不会失败。 您不需要使用选定的属性或[选定]，这是没有必要的 <ion-select [(ngModel)]="company.form.id" name="company.form.id"> <ion-option *ngFor="let form of forms" value="{{ form.id }}"> {{ form.name }} </ion-option> </ion-select> 长话短说，并引用离子文档（始终引用原始来源）： “选择应该与子元素一起使用。如果子元素没有被赋予 value 属性，那么它的 text 将被用作 value。 如果在 上设置了 value，则将根据该 value 选择所选选项。” ...因此...确保您的 ionic-select 和 ionic-select-option 上的 value 属性在代码中引用相同的 javascript object.attribute...基本上指向相同的东西。 .请参阅下面的 ionic-select 和数组级别 value="{{c.id}}" 中的页面级别属性 value="{{country.id }}" 离子选择选项 请注意，ngModel不再管理页面级别country属性生命周期 <ion-item> <ion-select *ngIf="countries.length > 0" (ionChange)="onCountryChaged($event)" interface="popover" clearInput="true" placeholder='Country (required)' value="{{ country.id }}"> <ion-select-option lines="none" *ngFor="let c of countries" value="{{ c.id }}"> {{ c.label }} </ion-select-option> </ion-select> </ion-item> Inside the .ts file we can now set *country* member programmatically Page:constructor(); this.platform.ready().then(async () => { this.getCountries(); //load list of countries from provider this.country = this.navDataService.getCountry();//local data store to save state between pages }).catch(error => { }); Page:EventHandler onCountryChaged(event): void { let id = event.detail.value; this.country = this.countries.find( item => item.id == id ) ; this.navDataService.setCountry(this.country); } 在离子选项内，你可以做 <ion-option [attr.selected]="(form.name == name) ? true : null"> {{ form.name }} </ion-option> in html----> <ion-item text-center > <ion-select [(ngModel)]="selectedQuestion" placeholder="Choose Security Question" > <ion-option *ngFor="let q of questionArray let i=index" selected="{{(i==defaultSelectQuestion).toString()}}" > {{q}} </ion-option> </ion-select> </ion-item> in ts----> //if u dont want any default selection this.defaultSelectQuestion = -1; //if first element should be your default selection this.defaultSelectQuestion = 0; this.selectedQuestion=this.questionArray[this.defaultSelectQuestion] 角度解决方案： html： <form [formGroup]="formName"> <ion-item> <ion-select label="Label" label-placement="floating" formControlName="formControleName" [value]="" > <ion-select-option *ngFor="let value of values" [value]="value"> {{ item}} </ion-select-option> </ion-select> </ion-item> </form> ts： let values = ["value1", "value2", "value3"] let defaultVlaue = "value2" this.formName = new FormGroup( { formControleName: new FormControl(defaultvalue, [Validators.required]) } )

IONIC 2 - Google 地图 API 在托管后无法与浏览器一起使用

托管后，我的 Google Maps API JavaScript 无法在浏览器中运行。 我的主办方是 OVH France。 控制台警告： Google 地图 API 警告：NoApiKeys https://developers.google.com/maps/documentation/

如何在 IONIC 3 中的 ion-item 部分显示两个 ion-col 字段

我需要在一行中显示两个输入字段，如下所示： 但是当我使用时： 电话号码 我需要在row内显示两个输入字段，如下所示： 但是当我使用时： <ion-list> <ion-item> <ion-label stacked> Phone Number</ion-label> <ion-grid> <ion-row> <ion-col> <ion-input type="tel" placeholder="Area code"></ion-input> </ion-col> <ion-col> <ion-input type="tel" placeholder="Number"></ion-input> </ion-col> </ion-row> </ion-grid> </ion-item> 但它没有显示任何屏幕： 请帮助我。 请尝试在 ion-item 之前添加 ion-row。我希望这可以帮助你。谢谢 <ion-list> <ion-label stacked> Phone Number</ion-label> <ion-row> <ion-item col-6> <ion-input type="tel" placeholder="Area code"></ion-input> </ion-item> <ion-item col-6> <ion-input type="tel" placeholder="Number"></ion-input> </ion-item> </ion-row> </ion-list> 您只需使用<ion-grid>，如下所示。 这正在工作stackblitz <ion-content> <ion-grid> <ion-row> <ion-col col-4> <ion-label stacked> Phone Number</ion-label> </ion-col> <ion-col col-4> <ion-input type="tel" placeholder="Area code"></ion-input> </ion-col> <ion-col col-4> <ion-input type="tel" placeholder="Number"></ion-input> </ion-col> </ion-row> </ion-grid> </ion-content> 就个人而言，我不建议在列表中的每个项目中创建网格......处理起来可能非常繁重。 但是看看你的代码，我发现你只想将行分成两部分，这样每个输入都会彼此相邻.. 所以这对我来说很有效（https://ionic-list-items-with-two-inputs-in-row.stackblitz.io/） <ion-content padding> <ion-list> <ion-label stacked> Phone Number</ion-label> <ion-item> <ion-input type="tel" placeholder="Area code"></ion-input> <ion-input type="tel" placeholder="Number"></ion-input> </ion-item> </ion-list> </ion-content> 在<ion-grid>之前添加<ion-row>，如下所示，它在离子项内对我有用。 <ion-item> <ion-grid> <ion-row> <ion-col>Lorem ipsum 1</ion-col> <ion-col size="shrink">lorem ipsum 2</ion-col> </ion-row> </ion-grid> </ion-item>

Ionic 3 组件与页面

你能告诉我 Ionic 3 应用程序中的组件和页面生成器有什么区别吗？看来我也可以在组件内部使用像 ionViewWillLeave 这样的页面生命周期钩子。所以什么时候应该...

Ionic 2 - 如何制作两行带有图标和文本的离子按钮？

情况： 在我的 Ionic 2 应用程序中，我需要将菜单按钮放在两行上：图标和文本。 问题在于 ion-button 指令以某种方式强制按钮位于一行上。 我需要离子-

Ionic 2 + Angular 2 的 Ng2 redux-store

我们可以在 ionic 2 中使用 ng2-redux-store (Github) Web 应用程序开发设置（存储、操作、减速器、订阅等...）进行 Angular 2 混合应用程序开发。我找不到 ng2-redux-store 的任何 QA ...

“Window”类型上不存在属性“cordova”。 ：离子

在我的代码中，我收到错误，因为类型“Window”上不存在属性“cordova”。 这就是我收到错误的地方 var browserRef = window.cordova.InAppBrowser.open() 我也安装了...

如何将 ionic 应用程序作为网站托管在服务器上

我使用 ionic 和 Cordova 创建了 Android 移动应用程序。现在我需要将此应用程序作为网站托管。我对托管网络应用程序没有任何了解。请帮忙。

Angular 2 - Firebase 存储 -putString() 方法支持元数据？

我的 ionic 2 应用程序中有一个简单的功能，可以将文件上传到我的 firebase 存储服务器。它从相机中获取图像的 base64 编码字符串，但是当我不尝试强制内容类型时......

android 中的离子角度运行问题？

我需要运行一个旧的离子项目，下面给出了使用的节点版本。 #自述文件# 此自述文件通常会记录启动和运行应用程序所需的所有步骤......