标签: ionic3

我开始学习离子2,我在app.ts文件中导入依赖项时遇到问题.

当我想要使用时:

"import {Http} from "angular2/http";

它告诉我,这个主题的错误:

[ts] cannot find module 'angular2/http'.

这是我的package.json的内容:

"dependencies": {
"@angular/common": "^2.0.0-rc.1",
"@angular/compiler": "^2.0.0-rc.1",
"@angular/core": "^2.0.0-rc.1",
"@angular/http": "^2.0.0-rc.1",
"@angular/platform-browser": "^2.0.0-rc.1",
"@angular/platform-browser-dynamic": "^2.0.0-rc.1",
"@angular/router": "^2.0.0-rc.1",
"es6-shim": "^0.35.0",
"ionic-angular": "2.0.0-beta.7",
"ionic-native": "^1.1.0",
"ionicons": "3.0.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
}

我认为这个问题在我的示例中很简单，因为当我引用名称时一切正常，但是当我尝试使用自定义短名称时却没有。

当我引用内部字段PercentComplete时，我有一个百分比完整的组件可以移动该栏，但是当我在装饰器中使用自定义名称时，我无法使其正常工作。

我的组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'progress-bar',
    templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {
    @Input()                        // @Input('Percent') does not work
    PercentComplete: number = 0;

    @Output()
    PercentChange: EventEmitter<number> = new EventEmitter<number>();

    constructor() { }

    Increment() {
        this.PercentComplete ++;
        this.PercentChange.emit(this.PercentComplete);
    }

}

简单的HTML标头

<ion-header>
    <ion-toolbar color="light" mode="md">
        <progress-bar [PercentComplete]="15"></progress-bar>
    </ion-toolbar>
</ion-header>

组件HTML：

<div class="progress-outer">
    <div class="progress-inner"  [style.width]="PercentComplete + '%'">
        {{PercentComplete}}%
    </div>
</div>
<div>
    <button ion-button round (click)="Increment()">
        <ion-icon name="add-circle"> </ion-icon>
    </button>
</div>

如果我将所有HTML引用从PercentComplete更改为Percent，则它将无法正常工作。

我正试图在api中实现离子应用中的产品类别.但实现相同时我得到以下错误

Error: Template parse errors:
Can't bind to 'ng-if' since it isn't a known property of 'div'."

这是代码:

  <div class="width50" *ngFor="let object of dataList">
    <div *ng-if= "{{object?.categories[0]?.slug}} == single">
    <img src="{{object.images[0].src}}" width="150"  (click)="navigateToPage(object.id)" />
    </div>
  </div>

当我打印{{object?.categories[0]?.slug}}代码的值工作正常并返回单.

使用*ngif over*ng-if似乎也不起作用,它显示以下错误.

`Template parse errors:
TypeError: key[0] is undefined ("
<ion-content padding>
  <div class="width50" *ngFor="let object of dataList">
    <div [ERROR ->]*ngIf= "{{object?.categories[0]?.slug}} == single">
    <img src="{{object.images[0].src}}" width="15"): ng:///AppModule/SinglePage.html@21:9
Can't bind to '*ngIf' since it isn't a known property of 'div'. "` …

我想在离子应用程序的主页中更改离子标签的字体大小。我已经读到可以更改__variables.scss文件中的字体大小变量，这可能会影响离子标签。我想我可以做到。但是我感到奇怪的是，在与页面关联的scss文件中设置ion-label的样式无效。我已经在网上搜索过，但是除了我的方法应该可以工作外，我什么都找不到。

这是我的scss：

$primary-color: #cf810c;
$bg-color: #CCFFFF;

page-home {
    .masters{
        background-color:$bg-color;
    }
    ion-label{
        color: $primary-color;
        font-size: 4em;
   }
}

这是我的html文件中的内容：

<ion-content padding class="masters">
  <ion-label stacked>Tap and press the buttons to win!</ion-label>
</ion-content>

我的页面如下所示：

在Ionic 3中,我在控制器中获取一组对象.但它对我没用.所以我想将对象数组转换为字符串数组.我在控制器中获取以下数据.

   this.users = [{"id":1,"name":"US"},{"id":2,"name":"UK"}]

但我想要下面的结果:

    this.users = ["US", "UK"];

我正在尝试创建一个编辑,所以我创建一个表单,然后我分配值.但我得到一个错误

ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后发生了变化.上一个值:'undefined'.当前值:'XXXXXX'.

这是我的edituser.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/Storage';

/**
 * Generated class for the EdituserPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-edituser',
  templateUrl: 'edituser.html',
})
export class EdituserPage {

    fullname : any;
    Deskripsi : any;
    phone:any;
    Email:any;
    user_id:any
  userData = {"username": "","password": "", "fullName": "","Email": "", "Deskripsi" : "", "Phone":""};

  constructor(public navCtrl: NavController, …

我有一个基于超级模板的离子3应用程序.我已将根页面设置为以下内容:

<ion-tabs>
    <ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="bonfire"></ion-tab>
    <ion-tab [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="search"></ion-tab>
    <ion-tab [root]="tab3Root" [tabTitle]="tab3Title" tabIcon="cog"></ion-tab>
</ion-tabs>

当我按下此页面上的硬件后退按钮时,根本没有任何反应.但是,当我将内容更改为其他内容时,例如:

<p>Hello</p>

然后按照我的意愿退出硬件后退按钮.

如何在选项卡页面上使硬件返回按钮正常工作,同时保留其他页面上的工作默认行为？

我在ionic3应用程序上遇到以下错误

未捕获错误:模块"AppModule"导入的意外值"AngularFireAuth".请添加@NgModule注释.

这是我的app.module.ts:

  import { BrowserModule } from '@angular/platform-browser';
    import { ErrorHandler, NgModule } from '@angular/core';
    import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

    import { MyApp } from './app.component';
    import { HomePage } from '../pages/home/home';
    import { ListPage } from '../pages/list/list';
    import { LoginPage } from '../pages/login/login';

    import { StatusBar } from '@ionic-native/status-bar';
    import { SplashScreen } from '@ionic-native/splash-screen';

    import { HttpModule } from '@angular/http';
    import { Geolocation } from '@ionic-native/geolocation';
    import { AngularFireDatabaseModule, AngularFireDatabase } from 
    'angularfire2/database';
    import …

我有一个屏幕上正在填充的项目列表，只想在列表视图中突出显示选中的项目/项目，请帮忙

 <ion-list >
  <button ion-item *ngFor="let route of Routes" (click)="selectCP(route)" >
    {{route.Name}}
  </button>  
 </ion-list>

我对ionic 4项目使用了角路由（@ angular / router）以禁用ionic 4中的设备后退按钮prevent-default不起作用，下面是我的代码

app.component.ts

    this.platform.backButton.subscribe(() => {
        if (this.router.url === '/Login') {
          this.util.presentAppExitAlert();
        } else {
          // event.preventDefault();
          console.log("invoing url ", this.router.url);
        }
      });
    });

我无法在此处禁用设备后退按钮的任何帮助