标签: ionic-framework

我是 Ionic 2 的新手，正在实现一个小型应用程序，每当我重新访问页面时我都想调用 REST API 函数。下面是我实现的一小段代码。

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
import { ItemService } from '../../providers/item-service';
import { ItemDetailsCartPage } from '../item-details-cart/item-details-cart'

@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html',
  providers: [ItemService]
})
export class CartPage {

  email;
  sessionId;
  public cartData: any;
  public message: any = [];

  constructor(public navCtrl: NavController, 
      public navParams: NavParams, 
      public itemSrvc: ItemService,
      public viewCtrl: ViewController) {}

  ionViewDidLoad() {
    this.email = this.navParams.get('email');
    this.sessionId = this.navParams.get('sessionId');;
    this.loadCart();
  }


  loadCart() { …

我正在使用离子框架。

在我的所有表单中，我使用离子选择确实显示一些选项。它工作完美。但它显示了 2 个英文按钮：取消和确定。

由于语言的原因，我想将此按钮重命名为其他名称。我可以在哪里做这个？我查看并搜索了整个目录，但找不到任何内容。看起来 ionic 正在以某种方式构建它们。或者我需要更多的 js 来重命名它吗？

我有一个使用“FormBuilder”构建的表单，它包含一个日期控件。如何使用设置（更新）该控件的数据patchValue()？

控件已displayFormat="DD.MM.YYYY"在模板中设置。

所有其他控件（ 和 ）上的数据均已设置，但日期控件仍为空。

页面/组件/.ts 文件

userDataForm: FormGroup;
user: UserModel;

constructor(
    private formBuilder: FormBuilder
) {
    this.userDataForm = this.buildForm();
}

buildForm(){
    return this.formBuilder.group({
        firstName: ['', Validators.compose([
          Validators.required
        ])],
        dateOfBirth: ['', Validators.compose([
          Validators.required
        ])]
    });
}

ionViewWillEnter() {
    // load data...
    refreshForm();
}

refreshForm(){
    this.userDataForm.patchValue({
        firstName: this.user.firstName,
        dateOfBirth: new Date("2016-04-19T18:03:40.887"), // does not work
    });
}

模板：

<ion-content padding>
    <ion-list>
        <form [formGroup]="userDataForm">

            <ion-item>
                <ion-label floating>Name: *</ion-label>
                <ion-input formControlName="firstName" type="text"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label floating>Date: *</ion-label>
                <ion-datetime formControlName="dateOfBirth" …

在我的应用程序中集成 okta 身份验证时出现以下错误。

OAuthError\n{\n    name: \xe2\x80\x9cOAuthError\xe2\x80\x9d,\n    message: \xe2\x80\x9cThe \xe2\x80\x98{0}\xe2\x80\x99 system claim could not be evaluated.\xe2\x80\x9d,\n    errorCode: \xe2\x80\x9cserver_error\xe2\x80\x9d,\n    errorSummary: \xe2\x80\x9cThe \xe2\x80\x98{0}\xe2\x80\x99 system claim could not be evaluated.\xe2\x80\x9d}\n    errorCode:"server_error"\n    errorSummary:"The \xe2\x80\x98{0}\xe2\x80\x99 system claim could not be evaluated."\n    message:"The \xe2\x80\x98{0}\xe2\x80\x99 system claim could not be evaluated." \n    name:\xe2\x80\x9cOAuthError\xe2\x80\x9d\n}\n

请帮我。

添加 \xe2\x80\x9cDiagnostic\xe2\x80\x9d 插件后，我无法构建我的 ionic 3 项目。

有一个转译错误：

typescript: .....app/plugins/cordova.plugins.diagnostic/cordova.plugins.diagnostic.d.ts, line: 6\n        Cannot find type definition file for \'cordova\'.\n\n   L5:  * "Dangerous" permissions that need to be requested at run-time (Android 6.0/API 23 and above)\n   L6:  * See http://developer.android.com/guide/topics/security/permissions.html#perm-groups\n   L7:  * @type {Object}\n

我该如何解决这个问题？以下是版本信息：

"@angular/common": "^4.4.3",\n"@angular/compiler": "^4.4.3",\n"@angular/compiler-cli": "^4.4.3",\n"@angular/core": "^4.4.3",\n"@angular/forms": "^4.4.3",\n"@angular/http": "^4.4.3",\n"cordova": "^7.0.1",\n"cordova-android": "6.3.0",\n"cordova-browser": "^4.1.0",\n"cordova-ios": "^4.5.3",\n"ionic-angular": "^3.7.1",\n

如果我评论这一行，它就可以工作/// <reference types="cordova" />，但这不是我猜的解决方案

我试图了解自定义事件发射器的流程。我有滚动代码，其中鼠标事件起作用，但自定义事件不起作用。通过开发工具跟踪它，它正在发出，但没有被侦听器接收到。

顶级组件在这里：

import { Component, Prop, Listen, State, Event, EventEmitter } from "@stencil/core"

@Component ({
    tag: "control-comp"
})
export class  SmsComp1 {
    @Prop() compTitle:string;
    @State() stateData: object = {name: "Fred"};

    @Event() stateChanged: EventEmitter;

    @Listen('inBox')
    inBoxHandler(ev) {
        console.log('In box', ev);
        this.stateData["name"] = ev.name;
        console.log('Emitting')
        this.stateChanged.emit(this.stateData);   
    }

    render () {
        let index = [1, 2, 3, 4, 5]
        return (
            <div>
                <h1>{this.compTitle}</h1>
                {index.map( (i) => {
                    return <my-component first={i.toString()} last="Don't call me a framework" width={i*40} height={i*40}></my-component>
                })} 
                <my-component first={this.stateData["name"]} last="'Don't call me …

我的设置：

\n
• NodeJS 服务器（托管在Heroku上）
\n
• Progressive-Web-App（托管在Firebase上）上）
\n

当我的本地主机上有应用程序和服务器时，一切工作正常。但由于我将其托管在这些平台上，因此不再设置客户端 Cookie。

Server.js（托管在 Heroku）

var express = require("express");\nvar bodyParser = require("body-parser");\nvar logger = require("morgan");\nvar methodOverride = require("method-override");\nvar cors = require("cors");\nvar cookieParser = require("cookie-parser");\nvar session = require("express-session");\nvar bcrypt = require("bcrypt-nodejs");\n\nvar appURL = "https://xxxxxxxxxxxxx.firebaseapp.com";\n\nvar app = express();\napp.use(logger("dev"));\napp.use(bodyParser.json());\napp.use(methodOverride());\n\napp.use(cors({origin: appURL, credentials: true, methods: "GET,POST"}));\napp.use(cookieParser());\n\napp.all(\'*\', function(req, res, next) {\n\n    res.setHeader("Access-Control-Allow-Origin", appURL);\n    res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");\n    res.setHeader("Access-Control-Allow-Credentials", true);\n    next();\n});\n\napp.set("trust proxy",1);\n\napp.use(session({\n    name: "random_session",\n    secret: "yryGGeugidx34otGDuSF5sD9R8g0G\xc3\xbc3r8",\n    resave: false,\n    saveUninitialized: true,\n    cookie: {\n …

我是 ionic 新手，所以我对 Ionic 框架不太了解，我正在尝试实现 Cordova-plugin-QR 扫描仪，但它在我的控制台上显示以下错误。

这是我的代码

import { Component, OnInit } from '@angular/core';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.page.html',
  styleUrls: ['./notification.page.scss'],
})

export class NotificationPage implements OnInit {
    constructor(private qrScanner: QRScanner  ) {
    }

ngOnInit(){
  this.qrScanner.prepare()
  .then((status: QRScannerStatus) => {
     if (status.authorized) {
       // camera permission was granted


       // start scanning
       let scanSub = this.qrScanner.scan().subscribe((text: string) => {
         console.log('Scanned something', text);

         this.qrScanner.hide(); // hide camera preview
         scanSub.unsubscribe(); // stop scanning
       });

     } …

摘要/背景

我连续 8 个小时试图解决一个似乎没有任何可行解决方案的问题：突然间，我的 Ionic Cordova 项目在连接互联网时开始出现问题。

我试图安装 Firebase 并设置 FCM，这让我遇到了这个问题。我最终回滚到我拥有的稳定版本，该版本工作完美并且没有给我带来任何问题。但问题仍然存在。就目前而言，在这个问题得到解决之前，我的应用程序完全死了而且毫无用处。

解释问题

• 该应用程序没有连接到互联网。Android平台文件夹与APK一样完美构建，但是当应用程序打开时，它无法从我的服务器获取资源。
• 它也无法访问其他通用 Internet 资源。例如，执行 afetch('http://www.google.com')返回状态 404。
• 我曾经直接在我的设备中测试 APK，并通过 Chrome 的“远程设备”选项激活开发者调试选项。现在，它什么也没检测到。
• 尽管听起来很奇怪，但通过导航器进行测试时，该应用程序运行良好ionic serve，可以正确访问我的服务器资源并正常执行网络请求。

到目前为止我已经尝试过的：

• 更改我的节点版本。我都尝试了 LTS 和最新版本 (v12.11.1)，但两者给出的结果完全相同。
• 将 Cordova 更新到最新版本，并将其回滚到 7.1，但都不起作用。
• 安装/卸载 Cordova Androidx 和 Cordova Androidx 适配器插件。
• 当然，在每一步中，都会删除并重新创建 Android 平台。
• 添加一个<meta>接受所有请求的标签，正如另一个线程中建议的那样。
• 添加<allow-navigation href="*" />到config.xml文件中。

系统和设置：

使用以下命令生成的转储ionic info：

Ionic:

   Ionic CLI                     : 5.2.5 (C:\Users\zerok\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : …

最近我从 Cordova 转向电容器存储 API。我有一个非常奇怪的问题。在第 1 页，我将 4 个值设置为本地存储，但是当我在另一页上访问这些值时，一个值显示为 null。

我尝试了很多方法，但值user_id始终为空。

我确保价值存储在本地存储中。

在从本地存储设置和检索值后，我还附加了 console.log 的图像

存储服务.ts

 async set(key: string, value: any): Promise<any> {


    if(value == null || value == undefined) {
      console.log("dont'do")
    }
    else {

      try { 
        await Storage.set({
          key: key,
          value: value
        });

        return true;
      } catch (reason) {
          console.log(reason);
          return false;
      }
    }

  }
  // to get a key/value pair
  async get(key: string): Promise<any> {
  try {

    const result = await Storage.get({ key: key });
    console.log('storageGET: ' …