Ionic 4 - 选择不显示控制器中设置的选定值

Question

问题：

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

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

截图：

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

2. 当点击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;

2. 在父控制器中填充ion-select选项：

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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