我在一个虚拟组件中有一个简单的ion-select
:
<ion-select
[value]="objectConfig!.soundType"
interface="popover"
(ionChange)="newSoundType.emit($event)"
>
<ng-container *ngFor="let soundType of SoundTypesArray">
<ion-select-option [value]="soundType" id="soundType-{soundType}">
{{ soundType }}
</ion-select-option>
</ng-container>
</ion-select>
/// model:
@Input() objectConfig: ObjectConfig
它只有一个作业。请告诉我用户何时选择了另一个SoundType
(soundTypeA
、soundTypeB
和soundTypeC
,其中soundTypeC
要求用户执行更多步骤或仅取消)。
我现在遇到的问题是,当用户选择soundTypeC
并取消时,<ion-select>
框会继续显示soundTypeC
作为选定值,而不是之前的值,即使objectConfig
仍将soundTypeA
作为soundType
值。
我知道我可以从我的父组件重新发送input()
,但我正在尝试防止重绘。是否可以防止ion-select
更改自己的值,并尊重这-〉[value]="objectConfig!.soundType"
?
编辑:
澄清一下:objectConfig
持有正确的值。我需要ion-select
来反映objectConfig.soundType
所说的内容。
将 Package 盒中的香蕉([()]
)与value
或ngModel
一起使用不起作用。
编辑2堆栈 lightning 战:https://stackblitz.com/edit/ionic-select-problem?file=pages%2Fhome%2Fhome.ts
**Edit 3 Stackblitz:**使用carlosGlegaspi answer时,离子选择的外部显示值是正确的,但内部ion-select
仍保留更改后的值
4条答案
按热度按时间jv4diomz1#
您可以使用selectedText属性,胁迫ion-select显示configObject的值。
在示例HTML中:
Stackblitz link
yqyhoc1h2#
Using carlosGlegaspi answer as base I managed to fix this although it feels like a hack.
instead of send directly an event I call a function first and I also send a reference to
ion-select
:Then in the function I send the event but also reset the value of
ionSelect
stackblitz with an example (using ionic3 because I could not bring ionic 4 to work with stackblitz) https://stackblitz.com/edit/ionic-select-problem-solution?file=pages%2Fhome%2Fhome.ts
scyqe7ek3#
objectConfig
仍保留旧值,因为您尚未设置双向绑定,即[(value)]="objectConfig!.soundType"
。laawzig24#
...
虽然很简陋但很管用。
离子4