标签: ionic3

我在 ionic 2 项目中工作，创建滑动以删除每个工作正常的项目，还需要单击按钮删除所有项目如何从 angular 2 的列表中删除所有项目？

<button ion-button clear>Clear All</button>    
<ion-item-sliding *ngFor="let note of notes">
          <ion-item>
              {{note.title}}
          </ion-item>
          <ion-item-options>
              <button (click)="deleteNote(note)" danger>
                  <ion-icon name="trash"></ion-icon>
              </button>
          </ion-item-options>
        </ion-item-sliding>

文件.ts

constructor( public viewCtrl: ViewController ) { 
    this.notes = [
      { title: 'This is notification swipe to delete' },
      { title: 'This is notification swipe to delete' }    
      ];
  }
deleteNote(note){

        let index = this.notes.indexOf(note);

        if(index > -1){
            this.notes.splice(index, 1);
        }
    }

auth.ts

signInWithGoogle(): firebase.Promise<any> {
return this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());}

登录.ts

loginGoogle() {
this.authData.signInWithGoogle().then(() => {
  this.navCtrl.push(TabsPage);
}, error => {
  this.presentToast("Invalid user details");
});}

打开谷歌帐户选择器和应用程序在移动设备中顺利运行时从列表中选择和帐户进行身份验证它会显示一条消息

当前项目未注册移动应用标识符

消息显示：

请帮我解决这个问题。谢谢！

我有一个输入字段，我给它一个占位符，如下所示

<ion-input 
[(ngModel)]="myname" 
type="text" 
#newName (keyup.enter)="save(newName.value); newName.value='' " 
placeholder="Name">
</ion-input>

我想在占位符中添加 if 条件但不知道该怎么做

在我的page.ts文件中，我有一个变量{{myname}}，如果它不为空，我希望占位符显示该值placeholder="Name"

我怎样才能做到这一点？

如何更改ion-contentionic 2 中的背景颜色？

我正在使用基于 angular 4 框架的 Ionic 3。而且我需要知道我是否有多个子组件可以异步加载它们，一个一个：

1. 加载父级；
2. 加载第一个孩子；
3. 当第一个孩子加载时，加载第二个孩子；
4. 当第二个孩子加载时，加载第三个孩子
5. 等等

例如，我有一个app.module.ts带孩子的父组件：

@NgModule({
declarations: [
    AppComponentPage
],
imports: [
    IonicPageModule.forChild(AppComponentPage),
    ChildOneComponentModule,
    ChildTwoComponentModule,
    ChildThreeComponentModule,
    ChildFourComponentModule,
],
entryComponents: [
    AppComponentPage
]})
export class AppComponentPageModule {}

和app.component.ts：

import { Component } from '@angular/core';
//import all child components

@Component({
  selector: 'app-parent-component',
  template: `
      <child1-component></child1-component>
      <child2-component></child2-component>
      <child3-component></child3-component>
      <child4-component></child4-component>
  `
 })
 export class AppComponentPage {

    //HOW TO LOAD?

 }

根据 Ionic 3 文档，这应该可以工作：

ionViewWillLeave(): boolean {
    if (this.cantLeave) {
        let alert = this.alertCtrl.create({
            title: 'You can\'t leave',
            subTitle: 'You stay and work.',
            buttons: ['Oh sorry']
        });
        alert.present();
    }
    return this.cantLeave;
}

然而它没有。警报出现，但页面仍会发生变化。但是这里它说return true或return false会告诉 Ionic 继续页面更改或停止它。 http://ionicframework.com/docs/api/navigation/NavController/

我究竟做错了什么？

我将项目升级到 ionic 3（从 ionic 2）。该项目使用以下方法在浏览器上运行良好：

ionic serve

我删除了android平台并重新添加了它。然后我想在 android 手机上测试它，所以我运行以下命令：

ionic build --release android

然后我在 android studio 上打开项目，出现以下错误：

Gradle sync failed: No match found

我已经升级了 gradle 和 android studio，但我遇到了这个问题。

这是 ionic 项目上的 config.xml：

<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="2.9.1" id="com.plato.app" ios-CFBundleVersion="2.9.1" version="2.9.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>PlatoWork</name>
    <description>Nerostimulation for work</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="http://ionic.local/*" />
    <allow-navigation href="http://192.168.1.176:8100" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent …

我试图UNIX通过以下方式在本地存储中设置时间：

let dt: number = Date.now();
localStorage.setItem('logged', dt+864000000);

返回错误： “数字”类型的参数不可分配给“字符串”类型的参数

当我getItem用来读取logged数据时，它给出了同样的错误。

有什么解决办法吗？

我只想知道如何render在Ionic应用程序上使用 html内容从相关类的属性中获取内容。

例如，我有以下两个文件...

家.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    message: String;

    constructor(public navCtrl: NavController) {
        this.message =
            `Below there is a piece of cake for you:<br />
            <img src="http://image.ibb.co/nJVNVS/cake.png" />`;
    }

}

主页.html

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <h2>Welcome to Ionic!</h2>
    <p>
        This starter project comes with simple tabs-based layout for apps that are going to primarily …

我正在使用离子 3。

<ion-header>
    <ion-navbar>
        <ion-title>{{ title }}</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>


</ion-content>
<ion-footer>
    <ion-title>
        {{ title }}
    </ion-title>
</ion-footer>

当内容超过屏幕高度时，我在“离子内容”中放入的内容不会滚动。我尝试在内容中使用网格：

 <ion-grid>
    <ion-row>
        <ion-col col-6>
            <ion-label>Some label</ion-label>
            <div>Some text</div>
        </ion-col>
        <ion-col col-6>
            <ion-label>Some label</ion-label>
            <div>Some text</div>
        </ion-col>
        <ion-col col-12 class="left-col">
            <ion-label>Some label</ion-label>
            <div>Some text</div>
        </ion-col>
    </ion-row>
</ion-grid>

还尝试使用列表：

<ion-list>
  <ion-item>Item 1</ion-item>
  <ion-item>Item 2</ion-item>
  <ion-item>Item 3</ion-item>
   ...
</ion-list>

什么都行不通。这里有什么问题？