ionic3 相关问题

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

我正在为乐队构建一个应用程序。乐队的歌曲在任何网站或任何社交媒体上均不可用。他们通过邮件向我发送了 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', }) 出口类

this.platform.is("mobile") 对于浏览器返回 true

我正在浏览器上运行一个离子项目 脚本 “浏览器”：“ionic-app-scripts服务--sourceMap源映射--iscordovaserve--wwwDir平台/浏览器/www/--buildDir平台/浏览器/www/build” ...

如何在点击按钮后动态调整传单地图的大小？

我有一份传单地图包含在 此页面分为 我有一份传单地图包含在<div id="map" data-tap-disabled="false" style="width: 100%; height: 100%;"></div> 此页面分为<ion-header>、<ion-content>和<ion-footer>。该地图包含在 <ion-content> 中。我想做的是用按钮隐藏页眉和页脚。 所以我用 L.easyButton 创建了一个按钮。代码如下： L.easyButton('click',function(){ if(self.hideLayout){ self.map.addControl(setLayers); self.map.addControl(setZoom); self.map.addControl(toolBar); self.map.addControl(setScale); self.enableAdditionalButtons(textButton, arrowButton); self.hideLayout = false; self.hideFooter = false; self.map.invalidateSize(true); }else{ self.map.removeControl(toolBar); self.map.removeControl(setLayers); self.map.removeControl(setZoom); self.map.removeControl(setScale); self.disableAdditionalButtons(textButton, arrowButton); self.hideLayout = true; self.hideFooter = true; self.map.invalidateSize(true); } 我将以下代码添加到<ion-footer>中： <ion-footer *ngIf="!this.mapService.hideFooter"> 发生的情况是地图不会调整大小，并且仍然是白色带而不是页脚 我尝试使用invalidateSize传单方法，即使使用“setInterval”但没有成功。我认为有关 html 和 css 的内容需要编辑，但我还不是专家。 再次感谢大家，我希望我说清楚了:) 根据您的代码，我将添加我的积分； constructor(private plt: Platform) { } L.easyButton('click', () => { const map = document.getElementById('map'); if (self.hideLayout) { self.map.addControl(setLayers); self.map.addControl(setZoom); self.map.addControl(toolBar); self.map.addControl(setScale); self.enableAdditionalButtons(textButton, arrowButton); self.hideLayout = false; self.hideFooter = false; self.map.invalidateSize(true); map.style.height = '100%'; map.style.width = '100%'; } else { self.map.removeControl(toolBar); self.map.removeControl(setLayers); self.map.removeControl(setZoom); self.map.removeControl(setScale); self.disableAdditionalButtons(textButton, arrowButton); self.hideLayout = true; self.hideFooter = true; self.map.invalidateSize(true); map.style.height = (this.plt.height() - 26) + 'px'; // 26 is the status bar, it may be 20 so u update it accordingly // source: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/ map.style.width = this.plt.width() + 'px'; } 如果它不起作用，那么您需要提供您的 ts 代码，因为（自己）不太清楚它是像（这个）还是您只是共享部分功能... 最后我找到了一个适合我的解决方案。我会把它发布在这里。我要感谢@Mostafa Harb 帮助我。 L.easyButton('click', function() { const footerAndHeader = Array.from(document.getElementsByClassName('scroll-content') as HTMLCollectionOf<HTMLElement>)[1]; if (self.hideLayout) { self.map.addControl(setLayers); self.map.addControl(setZoom); self.map.addControl(toolBar); self.map.addControl(setScale); self.enableAdditionalButtons(textButton, arrowButton); self.hideLayout = false; self.hideFooter = false; self.hideHeader = false; self.map.invalidateSize(true); footerAndHeader.style.marginBottom = "40px"; footerAndHeader.style.marginTop = "54px"; } else { self.hideLayout = true; self.hideFooter = true; self.hideHeader = true; self.map.removeControl(toolBar); self.map.removeControl(setLayers); self.map.removeControl(setZoom); self.map.removeControl(setScale); self.disableAdditionalButtons(textButton, arrowButton); self.map.invalidateSize(true); footerAndHeader.style.marginBottom = "7px"; footerAndHeader.style.marginTop = "3px"; } }) 在我的例子中，问题是带有“scroll-content”类的<div>，该类是在<ion-content>标签内自动创建的。因此，使用 getElementsByClassName，我获取了数组中的第二个元素，并调整了页眉和页脚的上边距和下边距。 这个解决方案肯定不是最优的，会有更好的方法。 CSS .mymap{ display: flex; width: 100%; height: 100%; } HTML <div id="map" data-tap-disabled="false" class="mymap"> // your code </div> 添加 display: flex 并设置 height 和 width

指定 max 和 min 时值发生变化的离子日期时间问题

我在我的项目中使用ion-datetime，以下是有关Ionic版本的一些信息： 离子： 离子 CLI：5.4.16 离子框架：离子角3.9.5 @ionic/app-scripts：3.2.2 而他...

离子发球 VS 离子发球 -c

我是 Ionic 新手，正在使用 Ionic 3.9.2 我有几个终端命令来为我的离子应用程序提供服务，但是，我没有发现这两个命令之间有任何区别。 离子服务 和 离子服务-c