ionic-framework 相关问题

为了将表单字段中的文本输入大写，我有以下代码：为了将表单字段中的文本输入大写，我有以下代码： <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>

angular ionic-framework input

回答 1 投票 0

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>

javascript typescript ionic-framework ionic4 stenciljs

回答 7 投票 0

如何显示数组中的元素

arrays angular firebase ionic-framework

回答 1 投票 0

如何检查传递的引用是否是 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;

angular ionic-framework angular2-changedetection viewchild

回答 1 投票 0

如何在 Angular 2 中获取当前元素的引用？

例如，我有一个函数 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); }

javascript angular ionic-framework ionic2

回答 3 投票 0

Nuxt ionic 底部导航栏未修复

使用我使用https://ionic.nuxtjs.org我使用html css创建了一个底部导航栏并将其放置在NuxtLayout中，但是当页面大于屏幕尺寸（它有滚动）时，底部

ionic-framework nuxt.js

回答 1 投票 0

为什么我的 Ionic 应用程序无法在 Android 7 上使用 Vue 运行？

我创建了一个新的ionic项目并选择了vuejs，我什么也没做，除了：离子构建离子帽添加android 离子帽复制离子帽同步离子帽打开android 我有一个 Android 7 虚拟设备...

vue.js android-studio ionic-framework

回答 1 投票 0

离子角度侧面菜单

我的侧菜单内容一直存在问题，每当插入 contentId="main-content" 时，导航链接的内容（主页）都不会加载/可见。但是当我删除它时，