问题

我有一个ion-select ,当用户做某事时,在控制器中,我用 1 个值填充ion-select并将该值设为选定值。 ion-select不显示值已被选中,但[(ngModel)]具有正确的值。 当我打开ion-select它显示列表中的值并被选中时,再次选择列表中的值时,它会越过ion-select label

如何使用值填充ion-select并使填充值成为选定值,以便它在ion-select为选定项?

截图

  1. Make 的值为CHEVROLET但它没有显示为ion-select

在此处输入图片说明

  1. 当点击ion-select ,它会显示CHEVROLET被选中并且CHEVROLET越过Make label

在此处输入图片说明

HTML :

 <ion-item> <ion-label position="floating"> <span class="required">* </span>Make </ion-label> <ion-select [interfaceOptions]="global.compactAlertOptions" id="make" [(ngModel)]="global.valuation.vehicle.make" name="make" #makeRef="ngModel" required> <ion-select-option *ngFor="let make of makes">{{make}}</ion-select-option> </ion-select> </ion-item> <ion-label *ngIf="makeRef.touched && makeRef.invalid && makeRef.errors.required" class="error">Make is required</ion-label>

控制器

  1. 模态控制器(Make 在弹出的模态中设置):

this.global.valuation.vehicle.make = this.vehicleDetails.VehicleMake;

  1. 在父控制器中填充ion-select选项:

this.makes = [this.global.valuation.vehicle.make];

#1楼 票数:3

当在 DOM 上加载<ion-select-option>选项之前设置 ngModel 中的值时,通常会发生这种情况。

您必须明确延迟将值设置为 ngModel,直到<ion-select>和选项加载到 DOM 上。

您可以通过在组件文件中添加setTimeout并在 setTimeout 的回调中分配 ngModel 值来实现它。

#2楼 票数:0

在我看来,这与您在模板上使用的一些自定义 css 有关。 因为当您使用浮动选择时与使用堆叠时完全相同,因为无论如何选择都会在离子项目上扩展。 这种浮动最适合离子输入。

在您的情况下,如果未选择该选项,则选择应为空且其上方的标签应为空。 但它位于项目的基线上,并且位于选择的基线上。 当您选择该选项时,它将显示在所选左对齐的基线中。 像这样:

在此处输入图片说明

如果你去掉浮动,你就会明白我的意思。 它应该显示如下:

在此处输入图片说明

如果您只提供扰乱元素对齐的 CSS 位,则更容易理解问题。

我的猜测是您有一些样式只减少了 ion-item 而不会处理内部元素的对齐和定位。

  ask by deanwilliammills translate from so

未解决问题?本站智能推荐:

1回复

Ionic4模型动作控制器

嗨,使用Ionic 4需要像这样实现下面的图像。如何使像这样的下面图像?
1回复

如何在离子选择中显示多个选定的值?

我正在使用 Ionic 4. 开发 PWA,同时使用 ion-select 来选择这样的多个值。 我得到以下输出,其中用户只能看到 ion-options 的第一个选定值的文本。 我尝试使用以下内容覆盖 css,但没有成功。
3回复

如何在ionic4中提供警报控制器css?

我想在 ionic 4.these 中给出警报控制器样式,这是我的演示代码, 我尝试在 global.scss 中应用 scss 我已经尝试了所有可能的方法在警报控制器中提供 css 但它不起作用所以请帮助我我被困在这里。
1回复

如何将单击功能应用于警报控制器并更改Ionic4中的语言

我在Ionic 4应用程序中工作,在Ionic 4中使用多语言应用程序,我已经使用警报控制器来显示语言,但问题是当用户选择特定语言时如何更改语言。 这是我的app.component.ts : 这是我的app.component.html : 当我打开应用程序时,选择的默认语言是英语
3回复

如何在Ionic4中处理两个调用和加载控制器

我有一个要求,我有 2 个 API 调用,我希望第一个请求的前两个调用在那里。 当导航回来时,第二个 API 调用在那里。 我打电话一日API ngOnInit网络挂接和第二API上ionViewWillEnter网络挂接。 我面临的问题是,当两个请求同时完成时,我的加载程序有时不会被解除。 所以我
1回复

警报控制器setmessage在ionic4中不起作用

在alertController中,如果输入字段为空,我想调用hint.setMessage(),但这在ionic4中无效 码 如果文本为空,我也不想关闭警报提示,请帮忙。
1回复

如何使用ionic4更改警报控制器背景颜色

如何使用 ionic 4 更改离子控制器背景颜色。我尝试了以下代码: CSS:
1回复

Ionic在Android模拟器或devapp上不显示json数据

在使用ionic serve命令的localhost:8100上,应用程序正在通过Web api (启用了起源为http:// localhost:8100的 CORS的asp.net核心后端)调用json数据,但工作正常。 现在,我在Galaxy 9和android模拟器( ionic co