在编辑模式下执行 CRUD 操作时选择离子选择选项答案

【问题标题】：Make the ion-select options selected while performing CRUD Operation in Edit Mode在编辑模式下执行 CRUD 操作时选择离子选择选项
【发布时间】：2018-07-15 05:39:10
【问题描述】：

我正在使用多个字段执行 CRUD 操作。我的所有字段都有[(ngModel)]。

我不想在加载时更改 [(ngModel)] 的名称或在 register.ts 或 edituser.ts 文件中分配任何值。由于我已经制作了表格以将寄存器模式下的值成功保存到数据库中。我需要在编辑用户表单中显示插入的值，我该如何执行。

注意：我在两种表单中都有其他几个字段，即文本字段、文本区域、密码，但不知何故，我设法在注册过程中将数据保存到数据库中，在编辑用户部分我也有显示除ion-select 之外的所有其他输入类型在编辑模式下插入的值。

例如： 在注册表单中，如果用户在编辑模式中选择了“男性”作为选项，我需要保留用户的输入权限，但表单再次显示“性别”而不是显示所选值。

下面我列出了包含ion-select 的两个表格以及我所做的努力。

register.html

<ion-item>
  <ion-label floating>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
     <ion-option value="Male">Male</ion-option>
     <ion-option value="Female">Female</ion-option>
  </ion-select>
</ion-item>

Edituser.html

我尝试了各种选项，但仅此一项就有效。但这不是我要找的那个。截至目前[(ngModel)]="editUser.gender" 正在工作，并且在选项标签中选择了该值，但这不是我想要的。我需要模型如下[(ngModel)]="gender"，但必须使用任何可用的方法来选择值。

<ion-item>
   <ion-label floating>Gender</ion-label>
   <ion-select [(ngModel)]="editUser.gender" name="gender">
      <ion-option value="Male">Male</ion-option>
      <ion-option value="Female">Female</ion-option>
   </ion-select>
</ion-item>

editUser 包含来自数据库的 JSON 数据。

这里的主要缺点是，当我像这样提供模型名称时，提交表单时不会获取值。所以我需要选择在不更改[(ngModel)] 的情况下选择值。

我的目标是将模型保留在 register.html 表单 [(ngModel)]="gender" 中用于注册和编辑表单。

【问题讨论】：

为什么不使用 FormGroup？您可以将离子选择字段（或整个表单）放在 FormGroup 中，然后删除 ngModel 并使用formControlName="gender"。这将使您对表单有更多的控制权

标签： javascript ionic-framework ionic3 hybrid-mobile-app angular2-directives

【解决方案1】：

我不相信有办法做你所描述的。但是，有一个解决方法。 Ionic Select 组件将发出一个 ion-change 事件，请参阅 API 文档中的 Output Events 部分。这是实现。

 <ion-select [(ngModel)]="gender" (ionChange)="onSelectChange($event)">

【讨论】：

【解决方案2】：

在加载页面，从editUser对象获取gender

 ionViewDidLoad(){
    this.gender = this.editUser.gender;
    }

【讨论】：

【解决方案3】：

您的 TypeScript 组件应该与此类似：

import { Component } from '@angular/core';
// ...

@Component({
  templateUrl: 'Edituser.html'
})

export class YOURCOMPONENT {

  // ...

  constructor () {

    this.gender = this.editUser.gender;

  // ...

【讨论】：