Ionic是一个前端框架，用于使用Sass和Angular开发具有HTML的本机感混合移动应用程序。默认情况下，它运行在Cordova之上。
我一直在尝试以与在另一个页面中相同的方式在每个选项卡中显示数组的元素，但在另一个页面中它是一个表单，而这里不是，这就是为什么它给我错误...
我已经更改了 Cruceros 文档中 Firebase 中的元素，这样它就不是 descripcionQueHacer1、descripcionQueHacer2 等，而是一个名为 descripcionQueHacer 的数组，其中包含所有元素...
Ionic Angular：大写表单字段值不适用于最后一个字符
为了将表单字段中的文本输入大写，我有以下代码： 为了将表单字段中的文本输入大写，我有以下代码： <ion-item> <ion-input label="Registration number *" labelPlacement="stacked" formControlName="carRegNr" type="text" autocapitalize="characters" placeholder="Registration number" clearInput="true" oninput="this.value = this.value.toUpperCase()"> </ion-input> </ion-item> 现在的问题是输入的最后一个字符没有大写。 IE。当我引用字段值时，它显示为例如“CAR-REGi” <span *ngIf="taskForm.value.carRegNr" class="form-header-label-text">{{taskForm.value.carRegNr}}</span> 同时将值发送到后端时，“CAR-REGi”也会被保存。 我是否忽略了什么？如何确保整个字符串都是大写的？ 您应该确保使用(input)而不是onInput，前者是事件绑定的角度方式，后者是javascript方式。 <ion-item> <ion-input label="Registration number *" labelPlacement="stacked" formControlName="carRegNr" type="text" autocapitalize="characters" placeholder="Registration number" clearInput="true" (input)="this.value = this.value.toUpperCase()"> </ion-input> </ion-item>
Ionic4 组件 - 菜单：必须有一个“内容”元素来监听拖动事件
我有以下代码： 我有以下代码： <!doctype html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Ionic 4 - Menu</title> <link rel="stylesheet" href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" /> <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script> <script> window.addEventListener('load', event => { document.querySelector('.button_details').addEventListener('click', (event) => { document.querySelector('.menu_main').toggle(); }); }); </script> </head> <body> <ion-menu class="menu_main" side="start"> <ion-header> <ion-toolbar color="secondary"> <ion-title>Left Menu</ion-title> </ion-toolbar> </ion-header> <ion-content padding> Hello World! </ion-content> </ion-menu> <ion-menu-controller></ion-menu-controller> <ion-card style="display:inline-block;width:300px"> <ion-card-header> <ion-card-title>Hello World</ion-card-title> </ion-card-header> <div style="padding:10px 10px;text-align:right;"> <ion-button color="primary" class="button_details">Details</ion-button> </div> </ion-card> </body> </html> 它工作正常，但有一个例外：当页面加载时，控制台上出现以下错误： Error: "Menu: must have a 'content' element to listen for drag events on." 这里有CodePen.io： https://codepen.io/anon/pen/qJgEzZ/?editors=1011 您可以在下面尝试代码StackOverflow： window.addEventListener('load', event => { document.querySelector('.button_details').addEventListener('click', (event) => { document.querySelector('.menu_main').toggle(); }); }); <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script> <link href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" rel="stylesheet"/> <ion-menu class="menu_main" side="start"> <ion-header> <ion-toolbar color="secondary"> <ion-title>Left Menu</ion-title> </ion-toolbar> </ion-header> <ion-content padding> Hello World! </ion-content> </ion-menu> <ion-menu-controller></ion-menu-controller> <ion-card style="display:inline-block;width:300px"> <ion-card-header> <ion-card-title>Hello World</ion-card-title> </ion-card-header> <div style="padding:10px 10px;text-align:right;"> <ion-button color="primary" class="button_details">Details</ion-button> </div> </ion-card> 知道如何解决这个问题吗？这里缺少什么？ 您可以用正确的代码来分叉我的CodePen.io吗？ 谢谢！ ion-menu需要contentId，ion-router-outlet需要id，所以菜单contentId必须是ion-router-outlet id: <ion-menu side="start" contentId="menuContent"> <ion-header> <ion-toolbar color="primary"> <ion-title>Start Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> </ion-list> </ion-content> </ion-menu> <ion-router-outlet id="menuContent"></ion-router-outlet> 如果您想要代码： 使用 content-id="content" 和离子含量 id="content"，其中 id 是调用菜单的主视图 ion-content 的标识符。 <ion-menu class="menu_main" side="start" content-id="content"> <ion-header> <ion-toolbar color="secondary"> <ion-title>Left Menu</ion-title> </ion-toolbar> </ion-header> <ion-content padding> Hello World! </ion-content> </ion-menu> <ion-menu-controller></ion-menu-controller> <ion-content id="content"> <ion-card style="display:inline-block;width:300px"> <ion-card-header> <ion-card-title>Hello World</ion-card-title> </ion-card-header> <div style="padding:10px 10px;text-align:right;"> <ion-button color="primary" class="button_details">Details</ion-button> </div> </ion-card> </ion-content> 对于未来的人，您可能会遇到这样的问题：离子分离窗格内有路由器插座，对吧？ 这样做： <ion-split-pane contentId="my-content"> <ion-menu contentId="my-content"> ... </ion-menu> <ion-router-outlet id="my-content"></ion-router-outlet> </ion-split-pane> 请注意，您的 ion-router-outlet 上的 [main] 属性现在已经消失了 来源：https://github.com/ionic-team/ionic/issues/19618#issuecomment-540648915 如果您不需要滑动手势来打开菜单，您可以将 swipe-gesture="false" 属性添加到 ion-menu 标签。 IMO 这应该可以消除错误，但目前还没有。我在 GitHub 上创建了一个问题。 https://codepen.io/anon/pen/mzgRBj?editors=1011 如果您希望滑动手势正常工作，则必须使用 ion-menu 属性在 content-id 元素上引用内容元素的 ID，请参阅 https://codepen.io/anon/pen/BqEpxE?editors=1011 如果您使用 React 和 Ionic 6，Ionic 文档有点过时。我必须更改以下项目才能出现菜单： 在 IonMenuButton 上设置 autoHide={false}； 在 IonMenuButton 上设置 menu="start"（菜单属性的值必须等于 IonMenu side 属性）； 改编后的代码菜单： <IonMenu side="start" contentId="main-content"> <IonHeader> <IonToolbar> <IonTitle>Hello</IonTitle> </IonToolbar> </IonHeader> <IonContent> <IonList> <IonItem>Hello</IonItem> </IonList> </IonContent> </IonMenu> <div id="main-content"> <IonHeader> <IonToolbar> <IonButtons slot="start"> <IonMenuButton autoHide={false} menu="start"></IonMenuButton> </IonButtons> </IonToolbar> </IonHeader> </div> </IonApp> 来自 ion-menu 文档的原始代码 -> https://github.com/ionic-team/ionic-docs/blob/00c0885346e0f048bb2c2bda104ea26cd9d1ff52/static/demos/api/menu/index.html 对于可能关心的人，这就是我所做的： <ion-split-pane contentId="main"> <ion-menu side="start" contentId="main"> <ion-header> <ion-toolbar color="primary"> <ion-title>Start Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-item>LogOut</ion-item> </ion-list> </ion-content> </ion-menu> <ion-router-outlet id="main"></ion-router-outlet> </ion-split-pane> 下面的解决方案对我来说是 Ionic 8 中的独立组件： // Ts Side import { IonMenu, IonHeader, IonTitle, IonToolbar, IonButton, IonContent, MenuController } from '@ionic/angular/standalone'; standalone: true, imports: [IonMenu, IonHeader, IonTitle, IonToolbar, IonButton, IonContent, MenuController] constructor(private menuController: MenuController) { } openDeclaration() { this.menuController.open('second-menu'); // Opens the side menu } // HTML SIDE <ion-button shape="round" (click)="openDeclaration()">Open Menu</ion-button> <ion-menu type="overlay" menuId="second-menu" contentId="content" id="content"> <ion-header> <ion-toolbar> <ion-title>Menu Content</ion-title> </ion-toolbar> </ion-header> <ion-content class="ion-padding ion-text-justify"> <p> I, hereby admit, while in my full legal competency that all the entered data and attached documents in this application are sound and accurate. Further, I shall advise Stackoverflow for Insurance within 10 days for any change that might take place on such data and documents or a fundamental change stated in this application. I also pledge to provide Stackoverflow with any information, data or documents that they might be requested later on with regard to this application. They shall have the right to verify and validate the soundness of this information, data or documents through official authorities. </p> </ion-content> </ion-menu>
我已经更改了 Cruceros 文档中 Firebase 中的元素，这样它就不是 descripcionQueHacer1、descripcionQueHacer2 等，而是一个名为 descripcionQueHacer 的数组，其中包含所有元素...
如何检查传递的引用是否是 Angular 中特定 ViewChild 引用的实例
我的 .ts 文件中有一个 viewchild 引用，例如， @ViewChild('someDialog') someDialog: ElementRef; 在 .html 文件中，我将引用传递回函数，例如， 我的 .ts 文件中有一个 viewchild 引用，例如， @ViewChild('someDialog') someDialog: ElementRef; 在 .html 文件中，我将引用传递回类似的函数， <abc-dialog #someDialog (close)="onDialogClose(someDialog)"></abc-dialog> 在我的 .ts 文件中，我想检查传递的 onDialogClose() 函数的引用是否等于 someDialog 视图子引用。 非常感谢任何帮助，谢谢。 更改您的 ViewChild 来查找组件。 @ViewChild('someDialog', { read: AbcDialogComponent }) someDialog: AbcDialogComponent; 或 @ViewChild(AbcDialogComponent) someDialog: AbcDialogComponent;
例如，我有一个函数 itemDragged()。在该函数内部，如何获取 ion-item-sliding 的引用来获取其当前的类属性？ 例如，我有一个函数itemDragged()。在该函数内部，如何获取 ion-item-sliding 的引用来获取其当前的类属性？ <ion-item-sliding *ngFor="let activity of activities" (click)="showModalInfo(activity)" (ionDrag)="itemDragged($event)"> 您可以在模板中使用引用变量 <ion-item-sliding #iis *ngFor="let activity of activities" (click)="showModalInfo(activity)" (ionDrag)="itemDragged(iis)"> <p>{{iis.class}}</p> 您会使用 ViewChild 并获取 nativeElement 吗？ 在组件API中，请注意，关键是如何在代码中访问它，传递给ViewChild的值是您为组件提供的“#”id（这是ES6，在TS中您将使用ViewChild注释） : ... queries { 'myElement' : new ViewChild ( 'myelement' ) } ... 在标记中： <div #myelement></div> 在您的组件函数（处理程序，无论您需要在何处获取它）中，nativeElement 属性都会为您提供对 HTML 元素的引用，因此您可以设置innerHTML、添加处理程序或您需要执行的任何其他操作。当然，还有其他方法可以通过绑定到属性来实现此目的（例如，您可以绑定到 (click) 或 [innerHTML]）： ... this.myElement.nativeElement... // etc. ... 或者，如果您想对多个元素（例如，一堆不同的可点击 div）使用单个处理程序，您可以使用 event.target 来做同样的事情。问题是，因为现在提供 ID 被认为是“不好的”，所以您必须有一种替代方法来识别哪个 DIV 被点击。您可以检查标签（innerHTML），您可以给它一个虚拟样式并检查等等。 但是深入研究事件类，你可以得到这样的类 itemDragged(event){ console.log(event._elementRef.nativeElement.className); }
使用我使用https://ionic.nuxtjs.org我使用html css创建了一个底部导航栏并将其放置在NuxtLayout中，但是当页面大于屏幕尺寸（它有滚动）时，底部
为什么我的 Ionic 应用程序无法在 Android 7 上使用 Vue 运行？
我创建了一个新的ionic项目并选择了vuejs，我什么也没做，除了： 离子构建 离子帽添加android 离子帽复制 离子帽同步 离子帽打开android 我有一个 Android 7 虚拟设备...
我的侧菜单内容一直存在问题，每当插入 contentId="main-content" 时，导航链接的内容（主页）都不会加载/可见。但是当我删除它时，
您正在运行 vue-i18n 的 esm-bundler 版本。建议配置您的捆绑程序以显式替换功能标志全局变量
我创建了一个 ionic 应用程序并添加了 vue-i18n。 npx ionic start myapp tabs --type vue npm 安装 vue-i18n@next 我完成了 VueI18n 设置的第一步，并将其添加到“./src/main.ts...
我目前正在开发一个简单的 Ionic React 项目；该移动应用程序用于标记上传图像的坐标，向每个点添加文本并上传到服务器。 然而，当图像
嗨@all，我有一个 Angular Ionic 应用程序，在这个应用程序中，我的信号库确实遇到了很多问题： 进口 { 补丁状态， 信号存储， 信号存储功能， 类型， 经计算， 带钩...
以离子按钮为例。假设我想在 css 中添加一些自定义样式。我有一些固定的样式，我想在术语中始终使用，所以理想情况下我可以限制我的离子按钮以保留它们
我正在寻找 Ionic 7 的 MQTT 客户端的库和示例。 我使用 MQTT.js 和 Paho MQTT 尝试了网上的一些示例，但没有一个在 Ionic 7 上对我有用。
在 Chrome 上模拟 ionic 应用程序时没有互联网问题
我是离子（角度）新手，我正在构建一个简单的应用程序。到目前为止，我只使用我的浏览器（chrome）来测试该应用程序。当我打开开发人员面板并进行导航、刷新等时，我会得到一个 &...
与我的离子按钮发生了一些争执。我想针对特殊情况定制它，以便： 当它配置为链接时，就很清楚了。 当用户将鼠标悬停时，会出现一条彩色下划线。 什...
我有一个多选复选框列表，如下所示。你能告诉我如何从组件（.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); } } }
我试图在禁用时对我的离子按钮进行一些控制。 这就是我所在的地方： // 设置按钮颜色和文本颜色 离子按钮[禁用] { --ion-color-base: var(--浅灰色) !
“jwt_decode__WEBPACK_IMPORTED_MODULE_11__ 不是函数”尝试使用 jwt-decode npm 包解码令牌时出现离子/角度/电容器错误
我使用了 jwt-decode 包来解码收到的令牌。 从“jwt-decode”导入*作为jwt_decode； 收到有效令牌后，我们将其称为变量 tok。 解码 tok...