ionic-framework 相关问题

Ionic是一个前端框架，用于使用Sass和Angular开发具有HTML的本机感混合移动应用程序。默认情况下，它运行在Cordova之上。

<ion-col size="4"> <ion-input class="input-field" style="--padding-end: 20px; text-align: end;" [(ngModel)]="discountPercent" (ngModelChange)="onDiscountPercentChange()" type="text" appDecimalPlaces="2"> <p slot="end">%</p> </ion-input> </ion-col> your text [(ngModel)]="discountAmount" 我想添加这个地方格式函数 getFormatedNumber(saleDecimals)，我该如何解决这个问题首先，这个问题感觉不完整，但我假设您需要使用自定义函数来格式化输入中的模型值为此，我们可以利用已经调用的 onDiscountPercentChange 并在其中运行 getFormatedNumber(saleDecimals) 就像 onDiscountPercentChange(): void { // run the format fn this.getFormatedNumber(2); }

javascript angular ionic-framework angular-ngmodel two-way-binding

回答 1 投票 0

在赛普拉斯测试 IonRange

有趣的是，这样一个标准组件中的这种标准行为很难测试。给定我的 Ionic React 组件中的 IonRange 元素：有趣的是，这样一个标准组件中的这种标准行为是如此难以测试。在我的 Ionic React 组件中给出一个 IonRange 元素： <IonRange min={0} max={30} onIonInput={()=> console.log("changed")} /> 当我手动测试 IonRange 时，我得到了预期的控制台输出。然而，当我进行像这样的柏树测试时（几乎是从文档中复制过来的）： cy.get("ion-range") .as('range') .invoke('val', 10) .trigger('change') 我希望在输出中看到日志语句。实际行为：范围旋钮跳至预期位置，但从未调用 onIonInout 回调。我还尝试了其他触发器，例如 .trigger('ion-change') .trigger('input') .trigger('ion-input') .trigger('range-change') .trigger('ionChange') .trigger('ionInput') 所有这些都会导致相同的行为。我还尝试使用箭头键来解决问题。这将是一个非常令人不满意的解决方案，因为它不能推广范围为 0 到 10,000 的情况。我还是尝试了一下： cy.get("ion-range").type('{rightArrow}') // trows "this is a non-typable element" 范围旋钮跳到中心（奇怪）。我最终得到的解决方法是： cy.get("ion-range").click() // clicks in the centre （@SuchAnIgnorantThingToDo-UKR 也提到过）然后我期望值 15。但是由于渲染分辨率的差异（即使使用设置的视口），结果在 15 和 16 之间变化。此外，考虑到我们可能想要断言特定值，这个解决方案非常不令人满意）我回顾了以下内容：这篇文章没有帮助，因为我已经使用了普通数字这有点相关，但是一个不同的特殊情况如果您对这个非常琐碎的日常问题有任何想法，请告诉我。 .click()命令将更改值并触发事件处理程序，但它不如直接设置值那么精确。 cy.window() .its('console') .then((console) => { cy.spy(console, 'log').as('log') }) cy.get('ion-range') .click(300,0) cy.get('@log') .should('have.been.calledWith', 'changed', 31) .invoke('getCalls') .then((calls) => { // open the DevTools to see the dumped table console.table(calls) expect(calls[0].args).to.deep.eq(['changed', 31]) // not exact, a +1 pixel occurs }) 来自 <IonRange onIonChange={({ detail })=> console.log("changed", detail.value)}></IonRange> IonRange 似乎与您引用的两个链接示例具有不同的内部机制。那些具有 <input> 底层，但 IonRange 没有。相反，它是一个基于模板的 Web 组件，它以自己的特定方式响应事件。范围旋钮跳到中心（奇怪）我得到了与 .click() 相同的结果，但没有指定要单击的坐标。我认为这是因为 .type() 内置了 .click()。如果不指定，默认点击位置是元素的中心。 @SuchAnIgnorantThingToDo-UKR 已经非常详细地回答了。我只是想添加如何测试拖动。你可以这样做： describe('Components', () => { it('ion-range', () => { cy.visit('https://ionicframework.com/docs/usage/v7/range/basic/demo.html?ionic:mode=ios') cy.get('ion-range').as('slider') const waitTime = 200 cy.get('@slider') // .trigger('mouseenter') .wait(waitTime) .trigger('mousedown', 100, 0) .wait(waitTime) .trigger('mousemove', 150, 1, { force: true }) .wait(waitTime) .trigger('mousemove', 200, 1, { force: true }) .wait(waitTime) .trigger('mousemove', 300, 1, { force: true }) .wait(waitTime) .trigger('mouseup', 300, 1) }) }) 老问题，但您可以使用以下代码触发离子范围的内部机制： cy.get('@slider').then(($range) => { const range = $range[0]; range.dispatchEvent(new CustomEvent("ionInput", { detail: { value: 0 }, bubbles: true })); range.dispatchEvent(new CustomEvent("ionChange", { detail: { value: 0 }, bubbles: true })); }); 并将值设置为您喜欢的值

reactjs testing ionic-framework range cypress

回答 3 投票 0

如何使用pnpm或bun更改Ionic CLI（包管理器）

如何在 ionic cli 中使用 pnpm 或 Bun 代替 npm？与 npm 相比，它有一些好的好处，比如较小的存储使用量、下载某些包时显示进度等等......

ionic-framework angular-cli ionic-cli pnpm

回答 1 投票 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

html ionic-framework ionic3

回答 1 投票 0

Cordova 在 iOS 上没有按预期振动

在我的 Ionic 3.20 + cordova ios 4.5.4 应用程序中，使用 cordova-plugin-vibration 3.0.1 并针对 XCode 9.4.1 进行编译，@ionic-native/vibration 在 iPhone 7 上的行为如下：以默认持续时间振动...

ios cordova ionic-framework iphone-vibrate

回答 2 投票 0

当我更改路线时，URL 会正确更新，但路线的组件未加载

有人可以帮助我吗？当我更改路线时，URL 会正确更新，但路线的组件未加载，我不明白为什么。在此处输入图像描述输入图像描述 h...

angular typescript ionic-framework routes components

回答 1 投票 0

如何克服 IONIC Vue 3 android 构建中的 CORS 错误？

我正在使用一个rest api，它允许本地主机使用CORS。当我使用离子应用程序的网络版本时，我按预期从服务器获得响应。但是当谈到android模拟器时它

android ionic-framework cors vuejs3

回答 3 投票 0

在外部单击时，Angular-ng-autocomplete 不会关闭下拉菜单

我正在尝试在我的 ionic 5 应用程序（Angular 12）中使用“angular-ng-autocomplete”（https://github.com/gmerabishvili/angular-ng-autocomplete）插件，但由于某种原因，当我点击外部时