ionic2 相关问题

Ionic 2是下一代Ionic，开源SDK，使开发人员能够使用熟悉的Web技术（HTML，CSS和JavaScript）构建高性能的高质量移动应用程序。离子2通常与Angular（2）配对。 Ionic 2也可以用作CSS框架，但你会错过强大的手势，UI动画和更多有用的东西。

如何在*ngFor中设置动态id？

如何在 Angular 2 中设置动态 id？我尝试过：这个.圈子= [ { x：50，y：50，id...

angular ionic2

回答 5 投票 0

导入的服务在抽象类上未定义

我有抽象类Collection，它利用服务数据库来初始化数据库上的集合。我有几个 Collection 的子类实例，它们都需要执行相同的数据库

angular typescript dependency-injection ionic2

回答 2 投票 0

如何轻松连接 typescript 变量和 html 标签中的字符串？

这是我的 ionic 2 的 html 代码这是我的 ionic 2 的 html 代码 <ion-item *ngFor="let job of allFreeJobs;let elementid=index"> <p> <span id="m{{elementid}}" (click)="showMore(elementid)" color="primaryAdmin">...<ion-icon name="bicycle"></ion-icon></span> </p> </ion-item> 从上面的代码来看，这是我关注的领域： ... id="m{{elementid}}" ... 如何轻松地将 m 与变量 elementid 连接起来？这对我不起作用。如Angular 文档中所述，您可以使用插值： id="{{'m' + elementid}}" 或属性绑定： [id]="'m' + elementid" 与其他答案一样，您也可以使用方括号和 attr 结构来完成此操作， [attr.id]="'m'+elementid" 要在 html 元素的属性中进行插值，您应该使用 [attr.attrName]="expression" 或在您的情况下 [attr.id]="'m' + elementid"

angular typescript ionic2

回答 3 投票 0

Ionic2 toast 中是否可以有换行符？

我都尝试过和 < br/ >，但不幸的是不起作用！这可能吗？ //显示toast欢迎用户！让用户 = this.currentUser(); //console.log(用户); 让吐司=吐司。

ionic-framework ionic2

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

为什么我需要使用ChangeDetectionStrategy？

我正在使用 Ionic 2。这是我的代码： ... 我正在使用 Ionic 2。这是我的代码： <div class="messagesholder" *ngFor="let chat of chatval | orderby:'[date]'; let i = index;let first=first;let last = last;"> {{last ? callFunction() : ''}} <div *ngIf="chat.sender == currentuser || chat.receiver == currentuser" > {{checkdate(chat.date)}} <p class="chat-date" id="abc" #abc>{{msgdate | amDateFormat:'LL'}}</p> </div> 这是我的checkdate功能： checkdate(date) { var res = date.split(" "); var A=res[0]; var local=localStorage.getItem('chatdate'); this.msgdate=""; if(local === undefined || local === null) { this.msgdate=A; localStorage.setItem('chatdate',this.msgdate); } else if(local !== undefined) { console.log(local != A); if(local != A) { this.msgdate = A; localStorage.setItem('chatdate',this.msgdate); } } } callFunction(){ this.content.scrollToBottom(0) } 它正在工作。但我收到此错误： FIREBASE 警告：用户回调引发异常。错误：表达式在检查后发生了变化。先前值：“2017 年 4 月 10 日”。当前值：''。因为，我通过在代码中添加这些行来实现此功能： import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'page-chat', templateUrl: 'chat.html', }) 现在，我没有收到任何错误消息。但内容不显示。我安慰了聊天值。运行良好。但它并没有显示任何价值。同时，当我返回后退按钮时，内容确实显示一秒。如果我删除ChangeDetectionStrategy，我再次收到此错误消息： FIREBASE 警告：用户回调引发异常。错误：表达式在检查后发生了变化。先前值：“2017 年 4 月 10 日”。当前值：''。为什么我需要使用ChangeDetectionStrategy？ UI 值不显示。说真的，您正在检查模型后修改其状态。如果不绑定到变量，你就不应该这样做。删除 this.msgdate="";

angular ionic2 angular2-changedetection

回答 1 投票 0

外部 API 在我的 ionic 2 混合移动应用程序中无法在 iPad 上运行

我开发了一个混合移动应用程序。在我的应用程序中，我使用了服务器上的一些外部 API。我没有 Mac，因此我使用 openssl 在 Ubuntu 系统上创建了 iOS 证书。我有...

ios ionic2 hybrid-mobile-app

回答 1 投票 0

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

我有一个多选复选框列表，如下所示。你能告诉我如何从组件（.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); } } }

angular typescript ionic-framework ionic2 ionic3

回答 2 投票 0

如何在函数后返回数组？

我设法使我的阵列在控制台上工作。当我单击按钮时，数组会显示在控制台上，但不会显示在 HTML 上。 TS：乔加尔（）{ 对于(var u=0;u<6;u++){ this.y = Math.ceil(...

javascript angular ionic2

回答 1 投票 0

等待多个Promise完成

我正在使用 Ionic 平台的 SQLStorage。删除函数返回一个承诺。在我的代码中，我需要删除多个值。当这些都完成后，我需要执行一些代码。怎么...

javascript angular promise ionic2

回答 6 投票 0

使用 Angular 通过 HTTP 发送 SOAP 请求？

我正在使用简单的 HTML、CSS 和 Angular 开始一个新的 Web 应用程序项目。我们正在使用现有的 Web 服务从某些服务器检索数据，我们尝试使用的一项服务是公共服务...

angular soap ionic-framework ionic2 wsdl

回答 2 投票 0

Ionic 2，日期选择器（cordova 插件）。类型“typeof DatePicker”上不存在属性“ANDROID_THEMES”

我在我的项目中安装了插件日期选择器。在顶部有 import { DataPicker } from 'ionic-native' 的组件中，如果我像这样使用它（带有注释的 androidTheme 参数）它 WO...

ionic2 cordova-plugins

回答 1 投票 0

Ionic ngx-translate 给我 asset/i18n/.json 404（未找到）

在我的 Ionic 应用程序上，ngx-translate 在控制台上向我显示以下消息： .... asset/i18n/.json 404（未找到）有关 HttpErrorResponse 的其他详细信息所以我在浏览器上的应用程序不断给出这个......

ionic-framework ionic2

回答 3 投票 0

nodejs 环境变量“NODE_EXTRA_CA_CERTS”

我正在开发一个基于Ionic + Angular + Cordova + Node js的移动应用程序。应用程序通过 window.XMLHttpRequest 访问 https 服务器： module.exports = 函数请求（方法，u...

node.js angular ssl ionic2 tls1.2

回答 2 投票 0

如何在 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>

html css ionic-framework ionic2 ionic3

回答 3 投票 0

在 Ionic 应用程序中处理 Toast 通知的正确方法

我有一个 Ionic 2 应用程序，它在各个地方都有 Toast 通知。一个很好的例子是用户在应用程序上更新他们的个人资料，然后我运行一些验证检查。如果用户失败

ionic-framework ionic2 toast

回答 3 投票 0

无法将snap.svg导入ionic2项目

我遵循了文档，但无法让 snap.svg 在我的 Ionic2 项目中工作。安装： npm 安装 snapsvg --save npm install @types/snapsvg --save 使用：从 'sna... 导入 * 作为 snapsvg...

ionic-framework ionic2 snap.svg

回答 2 投票 0

ionic 根据方向调整画布大小

我对编程还很陌生，我一直在遵循本教程在 Ionic 中制作一个简单的绘图应用程序。我按照教程进行操作并能够使其工作。然而当我在我兄弟身上测试时......