Ionic 4，Angular：使用 <ion-datetime>、<ion-select> 显示 OK 和 Cancel 按钮的问题答案

【问题标题】：Ionic 4, Angular: problems showing OK and Cancel buttons with <ion-datetime>, <ion-select>Ionic 4，Angular：使用 <ion-datetime>、<ion-select> 显示 OK 和 Cancel 按钮的问题
【发布时间】：2019-04-02 12:34:08
【问题描述】：

我正在处理一个关于 ionic 4 的项目，但是通过将 ion-datetime 标记放在我的 HTML 代码中，“确定”和“取消”按钮显示不正确。当我放置 ion-alert 和 ion-select 标签时，同样的事情发生在我身上。我显示图像 link1 和 link2 详细说明了我的问题：

我在下面显示 HTML 片段：

ion-datetime 标签的 HTML 片段：

<ion-item>
    <ion-label position="stacked" color="primary">
     <ion-text color="light">Fecha de Nacimiento</ion-text>
    </ion-label>
<ion-datetime displayFormat="DD MMM YYYY" monthShortNames="ene, feb, mar, abr, may, jun, jul, ago, sep, oct, nov, dic" color="light" placeholder="Seleccione fecha" required></ion-datetime>
</ion-item>

ion-select 标签的 HTML 片段：


 <ion-select [(ngModel)]="educa.Nivel_Academico" name="Nivel_Academico" placeholder="Nivel de Educación">
     <ion-select-option value="1">Técnico</ion-select-option>
     <ion-select-option value="2">Profesional</ion-select-option>
     <ion-select-option value="3">Empírico</ion-select-option>
 </ion-select>

我还在我的 config.xml 文件中显示了首选项：

... 
    <preference name="Orientation" value="portrait" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="StatusBarBackgroundColor" value="#6600cc" />
    <preference name="StatusBarStyle" value="#FFFFFF" />
    <preference name="KeyboardResize" value="true" />
    <preference name="SplashScreenDelay" value="3000" />
...
</platform>
    <plugin name="cordova-plugin-device" spec="^2.0.2" />
    <plugin name="cordova-plugin-inappbrowser" spec="^3.0.0" />
    <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="2.0.0-beta.1" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.2" />
    <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
    <plugin name="cordova-plugin-local-notification" spec="0.9.0-beta.2" />
    <plugin name="cordova-sqlite-storage" spec="3.1.0" />
    <plugin name="cordova-plugin-native-keyboard" spec="2.0.2">
        <variable name="LICENSE" value="TRIAL" />
        <variable name="LIC_ANDROID" value="TRIAL" />
    </plugin>
    <plugin name="cordova-plugin-camera" spec="4.0.3" />
    <plugin name="cordova-plugin-file-transfer" spec="1.7.1" />
    <engine name="ios" spec="^4.5.5" />
    <engine name="android" spec="7.1.4" />

请让我知道在这种情况下我做错了什么，或者我可以采取什么解决方案。

提前致谢

【问题讨论】：

标签： html angular ionic4

【解决方案1】：

您还没有在 ion-select

上添加 okayText 和 cancelText 属性

<ion-select [(ngModel)]="educa.Nivel_Academico" name="Nivel_Academico" placeholder="Nivel de Educación" okText="OK" cancelText="cancel">
    ...
<ion-select>

对于日期时间，我认为您没有正确使用属性。代码应如下所示：

<ion-datetime display-format="DD MMM YYYY" month-short-names="ene, feb, mar, abr, may, jun, jul, ago, sep, oct, nov, dic" color="light" placeholder="Seleccione fecha" required></ion-datetime>

您可以在Ionic Official Docs. 上找到更多详细信息，请查看ion-select 和ion-datetime 组件以获取更多详细信息。

【讨论】：