ionic3 相关问题

https：// localhost：8100/

MongoDB 作为实时数据库

我有实时数据库 Firestore 的经验。目前，我正在使用 MongoDB 开发 Ionic 3 应用程序。在该应用程序上，我们必须使用拉动刷新功能来更新最新内容。但如果我们

离子更改禁用按钮的字体颜色

如何更改禁用按钮的字体颜色？ 我有： {{行[8]}} 如何更改禁用按钮的字体颜色？ 我有： <ion-col col-1><button class='buttoncell abc noactualbutton' ion-button [disabled]="true" [color]="white">{{row[8]}}</button></ion-col> 和SCSS： .noactualbutton[disabled]{ color: rgb(255, 255, 255) !important; } 但是，它仍然“更白”，但它仍然是灰色的...... 禁用按钮时，不透明度会自动设置为 0.4。当按钮被禁用时，您可以将样式设置为按钮，如下所示： .noactualbutton:disabled, noactualbutton[disabled]{ color: white; opacity: 1; background: #b3b3b3; } 自 Ionic v4 起： 使用 :disabled CSS 选择器来定位禁用的 ion-button 将不起作用，因为它仅适用于可激活/可聚焦的元素，例如 button 或 input，相反，您必须使用 [disabled]。 此外，如果您设置了 color 的 ion-button 属性（例如 <ion-button color="danger">My button</ion-button>，您无法使用 --background CSS 属性更改背景颜色，而必须将 --ion-color-base 与 !important 一起使用） （你没有选择，因为 Ionic 已经定义了他们的 CSS 属性它）。 这是一个完整的例子： <ion-button color="danger" [disabled]="true"> My button </ion-button> ion-button[disabled] { --ion-color-base: #b34d5a !important; } ion-button { &[disabled] { opacity: 1; --background: #CCCCCC; } } 在最新的 Ionic 8 中，可以使用以下 CSS 来更改禁用的 Fab 按钮的背景颜色： ion-fab-button.fab-button-disabled::part(native) { background: yellow; }

Ionic 3 - 如何获取应用程序版本号？

我正在使用应用程序版本插件来获取版本号。我正在尝试如下：插件 this.appVersion.getVersionNumber().then((res)=>{ 控制台.log(res); }, (错误)=>{ 控制台.log(错误); }); 我是

正在搜索音乐文件的存储空间

我正在为乐队构建一个应用程序。乐队的歌曲在任何网站或任何社交媒体上均不可用。他们通过邮件向我发送了 mp3 文件。有没有什么平台可以上传...

从组件中选取所有选中的项目 - 多选复选框

我有一个多选复选框列表，如下所示。你能告诉我如何从组件（.ts）中选取所有选中的项目吗？ .html: 我有一个多选复选框列表，如下所示。你能告诉我如何从组件中选取所有选中的项目吗(.ts)？ .html: <ion-list> <ion-item *ngFor="let i of inputs"> <ion-label>{{i.display}}</ion-label> <ion-checkbox name="{{i.label}}" [(ngModel)]="i.checked"></ion-checkbox> </ion-item> </ion-list> .ts: this.inputs=[ { "encode": "1", "display": "en falls asleep without a caregiver in the room", "label": "uiFallsAsleepUnassistedBedTime", "checked": false }, { "encode": "2", "display": "During breastfeeding", "label": "uiBreastFeedBedTime", "checked": false }, { "encode": "3", "display": "Being rocked or held (in arms or baby sling/carrier)", "label": "uiSlingBedTime", "checked": false }, { "encode": "4", "display": "In motion (stroller, car, etc.)", "label": "uiInMotionBedTime", "checked": false }, ] OP 的反馈： 下面的一个对我有用。 this.inputs.filter(opt => opt.checked).map(opt => opt.label); 原答案： 我认为你应该将 i.checked 而不是 i. encode 绑定到 ion-checkbox。然后就可以使用Array.filter来获取选中的项目。 var inputs = [{ "encode": "1", "display": "en falls asleep without a caregiver in the room", "label": "uiFallsAsleepUnassistedBedTime", "checked": false }, { "encode": "2", "display": "During breastfeeding", "label": "uiBreastFeedBedTime", "checked": true }, { "encode": "3", "display": "Being rocked or held (in arms or baby sling/carrier)", "label": "uiSlingBedTime", "checked": false }, { "encode": "4", "display": "In motion (stroller, car, etc.)", "label": "uiInMotionBedTime", "checked": true }, ] console.log(inputs.filter(function(item){ return item.checked === true; })); 如果您有模型项状态检查变量，那么您可以添加到属性的绑定 <ion-checkbox name="{{i.label}}" [(ngModel)]="i.encode" [checked]="i.checked" (change)="change(i, $event)"></ion-checkbox> .ts代码： checked = []; change(item, event) { var index = this.inputs.map(i => i.encode).indexOf(item.encode); if(event.target.checked) { if(index === -1) { this.checked.push(item); } } else { if(index !== -1) { this.checked.splice(index, 1); } } }

Ionic 3 Lazy 模块中的条件路由页面

我在延迟加载 Ionic 3 应用程序“登录页面”、“视频页面”和“主页”中有 3 个不同的页面。 在我的视频页面中有一个复选框，上面写着：“在...

<ion-col>的单击事件在 IONIC 3 应用程序的 iOS 中不起作用

我正在使用 ionic 3 应用程序。我的主页包含图标网格，我为包含图标的 创建了一个单击事件。 超文本标记语言 我正在使用 ionic 3 应用程序。我的主页包含一个图标网格，我为包含图标的 <ion-col> 创建了一个单击事件。 HTML <ion-col col-4 text-wrap (click)="changeSubCategory(17)"> <ion-icon ios="ios-boat" md="md-boat" class="iconstyle primary-font-color"></ion-icon> <br> <p class="pstyle">Travel</p> </ion-col> 此事件在 Android 设备上运行良好，但不知何故在 iOS 设备上不起作用。我在控制台中也没有收到任何错误。 只需将 tappable 指令添加到您的元素即可。 喜欢： <ion-col text-center tappable (click)="presentSortedFoodModal('sugar')"> <ion-icon ios="ios-boat" md="md-boat" class="iconstyle primary-font-color"></ion-icon> <br> <p class="pstyle">Travel</p> </ion-col> 我确实遇到了同样的问题，删除 ion-list 解决了我的问题。 我解决了这个问题。我的ion-grid在ion-list里面。我删除了 ion-list 并将 ion-gird 放在 <ion-list> 之外，并且 click 事件也开始在 iOS 设备上工作。 我不确定这是否正确，但它解决了我的问题。 仍然欢迎更好的答案。 谢谢

类型“HTMLElement”上不存在属性“pseudoStyle”

我正在尝试使用 Typescript 修改伪元素的高度。 我在 IDE (vscode) 中收到以下错误 这是我的代码。 // 选择元素 让 el: HTMLElement = document.getElement...

(keyup.enter) 事件在 iOS 键盘中不起作用

我在 ionic 框架 + Angular 中开发了该应用程序，对于某些功能，我使用输入绑定了（keyup.enter）事件。但不知怎的，它在 iOS 设备最新版本中不起作用。但是

如何在 ionic 中设置和对齐工具栏中心的离子选择

我想在离子工具栏上设置选择选项，但我无法将其对齐到中心，我已经尝试了很多东西......通过使用这些方法我无法这样做， 我想在离子工具栏上设置选择选项，但我无法将其对齐到中心，我已经尝试了很多东西......通过使用这些方法我无法这样做， <div text-center> <label class="email"> <input type="email" placeholder="Email" name="email"> </label> </div> 此方法将输入框居中对齐，但不会将选择选项居中对齐。这是一个stackblitz <div text-center> <ion-item> <ion-select [(ngModel)]="gaming" interface="popover"> <ion-option selected value="empty">empty</ion-option> <ion-option value="n64">Nintendo64</ion-option> <ion-option value="ps">PlayStation</ion-option> <ion-option value="genesis">Sega Genesis</ion-option> <ion-option value="saturn">Sega Saturn</ion-option> <ion-option value="snes">SNES</ion-option> </ion-select> </ion-item> </div> 结果还是一样 .item-select{ position: initial; margin-left: 100px; width:40%; text-align: center; } 这也不影响，谁能告诉我如何在 ionic 中将选择选项设置为在工具栏上居中？ 我认为文本中心将无法工作，因为离子选择是组件。我已经通过在网格中使用离子选择来解决这个问题。 <ion-grid> <ion-row> <ion-col size="12" offset="4"> <ion-item> <ion-select> <ion-select-option selected>item 1</ion-select-option> <ion-select-option>item 2</ion-select-option> </ion-select> </ion-item> </ion-col> </ion-row> </ion-grid> 您需要为左边距、右边距、最大宽度和宽度百分比输入百分比。下面是我的例子（只取样式）： <ion-select name="remark" formControlName="event" interface="popover" [(ngModel)]="remark" style="max-width: 100%; width: 80%; height: 25px; margin-left: 10%; margin-right: 10%;" (ionChange)="onChange($event)" placeholder="Sila pilih satu"> <ion-option value="Y">Yuran</ion-option> <ion-option value="L">Lain-lain Bayaran</ion-option> </ion-select> 我发现解决这个问题的一个非常简单的方法是使用CSS： ion-select{ width: fit-content; } 如果您出于某种原因将 ion-select 放在 ion-item 中，则此方法不起作用，但是如果您使用包装器 div，则它可以正常工作： .selectWrapper{ justify-content: center; align-items: center; text-align: center; } <div class="selectWrapper"> <ion-select> <ion-select-option></ion-select-option> <ion-select-option></ion-select-option> </ion-select </div>

Ionic Cordova 应用程序，开始出现无法找到 pub.devrel:easypermissions:0.4.0 和 com.android.volley:volley:1.1.0 错误

本月，即 2024 年 8 月，我们开始在 Cordova Ionic 构建管道中收到错误，内容如下： 找不到 pub.devrel:easypermissions:0.4.0。 在以下位置搜索...

使用 Ionic3 的 HTML，如何分隔行

我有这个 HTML，我需要分隔每一行，我该怎么做？ 这就是我所拥有的： 我有这个 HTML，我需要分隔每一行，我该怎么做？ 这就是我所拥有的： <ion-grid class="grid-16 box"> <ion-row *ngFor="let device of connectedDevices" align-items-center> <button ion-item ion-col col-12 (click)="selectDevice(device)"> <ion-col col-auto><img [src]="getIcon(device.physAddress)" height="28"></ion-col> <ion-col>{{ getName(device.physAddress, device.hostName) }}</ion-col> <ion-col col-auto> <ion-row> <ion-col class="grid connection"> <img *ngIf="device.interfaceType == 'Wifi'" src="assets/icon/ico_device_wifi.svg" width="21"> <img *ngIf="device.interfaceType == 'Ethernet'" src="assets/icon/ico_device_lan.svg" width="21"> </ion-col> </ion-row> <ion-row> <ion-col class="grid success">{{ liveboxWifiDevicesCms.literalConnected }}</ion-col> </ion-row> </ion-col> </button> </ion-row> </ion-grid> 这就是我需要的： 你用过的类box我猜是有阴影的盒子。在 ion-row 而不是 ion-grid 上使用此类。除此之外，在离子行中使用一些margin-bottom

单击离子选择时如何打开自定义模式对话框

我的应用程序中有一个离子选择器。我想在单击选择时打开自定义对话框而不是默认对话框。这是因为，我需要根据

如何在 Angular4 的 ng2-charts 中使用所有选项（单击功能、颜色）创建自定义图例？

我在 angular4 和 ionic3 项目中工作。这里我显示多个数据数组的 ng2 饼图。当数组中的数据增加时，图例宽度增加，聊天由于太大而消失...

Ionic 输入中的自动键盘

我需要 Ionic 上的一个例程，在进入页面时调用手机键盘进行离子输入。 页面的示例如下： ... 我需要 Ionic 上的一个例程，在进入页面时调用手机键盘进行离子输入。 页面示例如下： <ion-content padding> <form> <ion-row> <ion-col> <ion-input #user name="user" type="text" placeholder="Usuário"></ion-input> </ion-col> </ion-row> </form> </ion-content> 我想要的是使用 Ionic 的导航生命周期（我相信在这种情况下使用 ionViewDidEnter）自动将焦点和键盘带入字段，我已经尝试过一些代码，但不幸的是有时它有效，有时无效，马上谢谢你。 您可以在 ionViewDidEnter 方法中在文本区域中设置焦点，并使用 ionic 键盘插件显示键盘。 @ViewChild('user') input ; ionicViewDidEnter(){ setTimeout(() => { this.input.setFocus(); },150); this.keyboard.show(); } 我参考了以下链接。请浏览它以获取更多信息： https://ionicframework.com/docs/native/keyboard/ https://forum.ionicframework.com/t/setting-focus-to-an-input-in-ionic/62789/4 使用 Ionic 2 将焦点设置在输入上 依赖setTimeout永远都不好。尝试使用较新的、独立于平台的 Ionic 版本： Keyboard.show().then(() => { this.input.setFocus(); });

Azure Active Directory 的应用程序配置错误

我正在我的 ionic 应用程序 3 中实现 Microsoft ADAL 插件，因此我已在 Microsoft azure 上创建了一个帐户，并在 Azure 门户中注册了我的应用程序。在完成所有必要的配置后，我使用了...

从第 2 页导航到第 1 页期间页脚可见

离子页脚按钮不会正确消失。 这是第2页的代码： 从第 1 页导航到第 2 页，然后从第 2 页导航回第 1 页时，离子页脚按钮不会正确消失。 这是第2页中的代码： <ion-footer padding> <button ion-button block round color="primary">Add to Order</button> </ion-footer> 我在 github 上发现了完全相同的问题，建议添加标签ion-toolbar 但这对我不起作用： 背面的离子页脚应该在 willLeave 上消失，而不是 didLeave 导航转换期间页脚可见 ion-footer-bar 和 ion-header-bar 的导航动画 如有任何评论/答案，我们将不胜感激！ 创建一个新类，例如 .app-footer，其 CSS 属性与 ion-footer 相同，并将 HTML 放在 ion-content 中，如下所示： HTML <ion-content> <page code> <div class="app-footer">...</div> </ion-content> SCSS .app-footer { left: 0; bottom: 0; position: absolute; z-index: 10; display: block; width: 100%; } 最后，我让它工作，用填充将按钮包裹在 div 标签中解决了我的问题： <ion-footer> <div padding> <button ion-button block round color="primary" [disabled]="items.length === 0" (click)="onContinueClick()"> Continue </button> </div> </ion-footer> 如果有人在新版本中仍然遇到此问题。我刚刚覆盖了 ion-footer 的属性，它起作用了。在@Alex Steinberg解决方案的帮助下解决了这个问题，但修改了他的方法。 ion-footer { left: 0; bottom: 0; position: absolute; } 在 ionic 版本 6 上我遇到了同样的问题，对于那些面临同样问题的人来说，对我有用的解决方案是将 ion-footer 的内容包含在 ion-content 中 代码示例： <ion-footer> <ion-content> Your footer content </ion-content> </ion-footer> 就我而言，我还必须设置离子页脚的高度，例如： ion-footer{ height: 6rem; }

Ionic 3 文件权限

我不愿意让OpenAi从我的内容中获利。 所以，我删除这个问题。我确信这不会有任何结果，但无论如何我这样做是为了抗议。

“离子按钮+仅图标”组件内部不起作用

我正在使用 Ionic 3.*，试图创建一个仅包含一个按钮的组件。 组件代码为： @成分（{ 选择器：“个人资料按钮”， templateUrl: 'profile-button.html', }) 出口类