Ionic 2是下一代Ionic,开源SDK,使开发人员能够使用熟悉的Web技术(HTML,CSS和JavaScript)构建高性能的高质量移动应用程序。离子2通常与Angular(2)配对。 Ionic 2也可以用作CSS框架,但你会错过强大的手势,UI动画和更多有用的东西。
如果没有输入选择,如何启用/禁用 Ionic >=2 警报按钮
我有一个带有单选按钮选项的 Ionic 警报,并且希望在用户做出选择之前禁用“确定”按钮。与这篇文章非常相似,除了我想通过...
我是 Ionic2 的新手,我正在尝试根据当前的菜单选择构建动态选项卡。我只是想知道如何使用导航控制器获取当前页面。 ... 导出类 TabsPage {
我正在尝试制作一个 1 行 * 2 列的网格,如下所示: 我正在尝试制作1-row * 2-col的网格,如下所示: <ion-grid> <ion-row *ngFor="let products of productsArray"> <ion-col center text-center col-6 *ngFor="let product of products"> <ion-card (click)="onProductClick(product)"> <ion-badge *ngIf="product.on_sale" class="badge-onSale" item-right>Sale</ion-badge> <img src="{{product.featured_src}}" /> <ion-card-content> <ion-card-title style="font-size: 100%"> {{ product.title | StripHTML }} </ion-card-title> </ion-card-content> <ion-row center text-center> <p style="color: red"> {{ product.price_html | StripHTML:{split:" ",index:0} }} </p> </ion-row> </ion-card> </ion-col> </ion-row> </ion-grid> 由于每个card->content-height的差异,cards/rows的高度不相等,我该如何解决这个问题? 我通过将这些样式添加到ion-col来修复它 .product-col{ display: flex; justify-content: center; } 现在它按预期工作了!
我不愿意让OpenAi从我的内容中获利。 所以,我删除这个问题。我确信这不会有任何结果,但无论如何我这样做是为了抗议。
我正在使用 Chart.js 我想要一个半圆环图,如下图所示。但我没能改变馅饼的厚度。我尝试了属性innerRadius但它仍然不起作用 这是我的
我有一个 Ionic 2 应用程序,它使用 fullcalendar。 我按照以下步骤在 Ionic 2 上使用它,效果非常好。 但现在,我需要从页面组件动态创建事件,其中包括...
Ionic 2 如何使 InAppBrowser 和其他插件在浏览器中运行时工作
我正在 Ionic 2 中创建一个应用程序,它使用现有网站的 Web API。要使用此 API,我必须通过以下方式进行身份验证(类似于 Facebook 登录): 我调用 API 来...
我是 Ionic 新手,正在使用 Ionic 3.9.2 我有几个终端命令来为我的离子应用程序提供服务,但是,我没有发现这两个命令之间有任何区别。 离子服务 和 离子服务-c
我遇到一种情况,我必须在单击按钮时取消选中复选框。 这是我的复选框代码 我遇到一种情况,我必须单击按钮取消选中复选框。 这是我的复选框代码 <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"> </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 2 设计的用于浏览器的网络应用程序 我的网络应用程序在移动屏幕上运行良好,但是可以使其如下图所示吗? 如果可以的话我该怎么做?
我已经创建了输入类型并创建了该框的边框,但是当我单击该按钮时,它显示默认颜色,但我不应该显示默认颜色 贝洛...
使用 ionic 包构建发送 google-services.json
由于我没有 Mac 和 iPhone,所以我唯一的选择是使用 Ionic Cloud 构建我的本机二进制文件。然而,首先我想尝试一下它,看看它如何与 Android 版本一起工作。 我的
我正在尝试使用 Azure AD 开发应用程序的用户身份验证功能,但在此过程中遇到一些问题。我已经使用 ADAL 库实现了客户端流身份验证...
我在装有 iOS 11 的 iPhone 7 plus 上使用 Ionic 3。当我运行我的应用程序时, 并填写一些文本/输入字段(基本表单),应用程序会冻结 几秒钟后变得完全没有反应(这不是......
我使用的是 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 应用程序中的组件和页面生成器有什么区别吗?看来我也可以在组件内部使用像 ionViewWillLeave 这样的页面生命周期钩子。所以什么时候应该...