Angular 离子4反应形式-离子选择在编辑时不显示初始值

我已经看到了一些关于爱奥尼亚的旧版本的帖子，但是没有关于爱奥尼亚4和反应形式的答案

我的“游戏形式”有一个选择：

<ion-select formControlName="team"  placeholder="Select a Team" ok-text="Okay" cancel-text="Dismiss">
        <ion-select-option size="12" *ngFor="let team of teams | async" [value]="team">
            {{ team.year }} - {{ team.name }} ({{ team.weeknight }}'s)
        </ion-select-option>
    </ion-select>

{{team.year}-{{team.name}}（{{team.weeknight}}的）

当我创建一个新游戏时，select会显示占位符，我可以选择团队并创建对象，sweet！但当我去编辑游戏对象时，同样的表单显示，但选择没有任何价值；我必须手动单击下拉列表并重新选择团队

以前的帖子说要使用[（ngModel）]，但如果我尝试使用

[{ngModel}]=“team”

，不仅它仍然不会显示，而且我还会在控制台中收到一条警告，上面说：

“看起来您在与formControlName相同的表单字段上使用ngModel。 支持将ngModel输入属性和ngModelChange事件用于 Angular v6中已弃用被动表单指令，将被删除 在角度v7中。”

---

不知道我错过了什么。我的所有其他字段都使用formControlName正确绑定。这是一个ionic错误吗？

在标记中使用被动表单字段的正确方法是为每个字段定义一个

formControlName

。此名称需要与组件中的表单定义匹配

您可以使用

setValue

和

PatchValue

使用值初始化表单字段

---

确保选择字段的

value

属性绑定到正确的值。看起来它绑定到了完整对象而不是字段。

在标记中使用被动表单字段的正确方法是为每个字段定义一个

formControlName

。此名称需要与组件中的表单定义匹配

您可以使用

setValue

和

PatchValue

使用值初始化表单字段

---

确保选择字段的

value

属性绑定到正确的值。看起来它是绑定到完整对象的，而不是一个字段。

@jcuypers感谢您确认我使用formControlName是正确的。我解决了这个问题。首先，我从ionic 4 beta 7升级到了ionic的最新版本。然后在他们的文档站点上挖掘，看起来在处理对象时需要使用compareWith属性。我添加了compareWith属性及其功能，看起来不错

@jcuypers感谢您确认我的formControlName是正确的。我解决了这个问题。首先，我从ionic 4 beta 7升级到了ionic的最新版本。然后在他们的文档站点上挖掘，看起来在处理对象时需要使用compareWith属性。我添加了compareWith属性及其功能，看起来不错

您可以使用

[selectedText]

：

<ion-select [interface]="interface()" formControlName="salesman" okText="Seleccionar"
                    cancelText="Cancelar" placeholder="Seleccionar..."
                    [selectedText]="agentsForms.controls[i].get('salesman').value">
                    <ion-select-option [value]="s.displayName" *ngFor="let s of uSR.usersRoles$|async">
                      {{s.displayName}}
                    </ion-select-option>
                    <ion-select-option value="otro">Otro</ion-select-option>
                  </ion-select>

{{s.displayName}}
奥特罗

您可以使用

[selectedText]

：

<ion-select [interface]="interface()" formControlName="salesman" okText="Seleccionar"
                    cancelText="Cancelar" placeholder="Seleccionar..."
                    [selectedText]="agentsForms.controls[i].get('salesman').value">
                    <ion-select-option [value]="s.displayName" *ngFor="let s of uSR.usersRoles$|async">
                      {{s.displayName}}
                    </ion-select-option>
                    <ion-select-option value="otro">Otro</ion-select-option>
                  </ion-select>

{{s.displayName}}
奥特罗

如果您需要更完整的帮助，请粘贴完整的表单代码和处理表单的组件代码。这里可以找到一个很好的示例作为说明：如果您需要更完整的帮助，请粘贴完整的表单代码和处理表单的组件代码。下面可以找到一个很好的示例作为说明：