ionic2 相关问题

我使用的是 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]) } )

html angular ionic-framework ionic2

回答 10 投票 0

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

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

javascript google-maps ionic2

回答 3 投票 0

如何在 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>

angular cordova typescript ionic2 ionic3

回答 4 投票 0

Ionic 3 组件与页面

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

angular typescript ionic-framework ionic2 ionic3

回答 3 投票 0

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

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

css ionic-framework ionic2

回答 4 投票 0

Ionic 2 + Angular 2 的 Ng2 redux-store

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