标签: ionic2

如何在Ionic 2中制作响应式网格？Ionic 1支持保留类,responsive-md或者responsive-sm使网格响应,但它们似乎不适用于Ionic 2.

在我的情况下,我有<ion-row>三个<ion-col>.当显示宽度低于阈值时,我希望列相互下降.用Ionic 2可以做到这一点吗？

我有一个ionic2应用程序,并使用Firebase和angularFire2.我想使用angularFire2从firebase获取当前的身份验证状态和当前的auth对象/用户.

这是迄今为止的工作 - 我可以对用户进行身份验证并订阅FirebaseAuthState以获取facebook用户对象.

  constructor(platform: Platform, private auth: FirebaseAuth) {

    auth.subscribe((user: FirebaseAuthState) => {
      if (user) {
        // I could store user in localstorage, but I'd like to see an All Firebase solution
        this.rootPage = TabsPage;
      } else {
        this.rootPage = LoginPage;
      }
    });

现在我可以在这里设置localstorage并缓存我的用户对象以记住身份验证状态.但是,我很想知道如何在没有实现自己的自定义本地存储密钥的情况下才能使用Firebase.我看到Firebase存储了它自己的localStorage密钥,因此知道它已登录.

如何从代码中获取auth对象？另外,我尝试在AngularFire2文档中列出的示例来渲染模板中的auth状态 - 但这给了我一个错误.

import {FirebaseAuth} from 'angularfire2';
@Component({
  selector: 'auth-status',
  template: `
    <div *ng-if="auth | async">You are logged in</div>
    <div *ng-if="!(auth | async)">Please log in</div>
  `
})
class App {
  constructor (@Inject(FirebaseAuth) public auth: FirebaseAuth) …

我有两个CSS类名如下

.icon_heart{
     color: #bdbdbd;
}

.icon_heart_red{
    color:#a6b7d4;;
}

我的HTML有一个心脏图标

<div class="icon_heart" *ngIf="showheartIcon">
    <ion-icon name="heart" (click)="setWishlistTrue(category.product_id);" class="heart"></ion-icon>
</div>
<div class="icon_heart_red" *ngIf="showheartIconRed">
    <ion-icon name="heart" (click)="setWishlistFalse(category.product_id);" class="heart"></ion-icon>
</div>

这里我有两个div标签,心脏图标最初为灰色,单击时我会将其更改为蓝色.

这是我的ts文件代码:

  showheartIcon=true;
  showheartIconRed =false;

  setWishlistTrue(id){
    this.showheartIconRed = true;
    this.showheartIcon = false;
  }

  setWishlistFalse(id){
    this.showheartIconRed = false;
    this.showheartIcon = true;
  }

我有两个不同颜色的图标.

题

而不是有两个心脏图标是否可以更改图标的类别？

我在JavaScript中看到我们可以改变它w3schools将类应用于div标签的简单方法,但我是TypeScript的新手.我怎样才能改变课程？

有没有办法只刷新一个页面,即ionic2中只有一个屏幕.

我试过了 :

window.location.reload();

和

location.reload();

但它重建应用程序..有没有办法只刷新该页面(特定屏幕).

还尝试过:

<ion-input *ngIf="no_internet === 1" (click)="refresh($event)"></ion-input>

在TypeScript中:

refresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
        console.log('Async operation has ended');
        refresher.complete();
    }, 2000);
}

我在Ionic 2视频教程中关注Joshua Morony的Google Maps入门.我想在我的应用程序中使用谷歌地图,我最终得到一个打字稿错误.这是 pages/home/home.ts文件的一部分

initMap(){
let latLng= new google.maps.LatLng(6.929848, 79.857407);

let mapOpt={
  center : latLng,
  zoom : 15,
  mapTypeId :google.maps.MapTypeId.ROADMAP
};

this.map= new google.maps.Map(this.mapElement.nativeElement,mapOpt);}

我试过了npm install --save @types/googlemaps,

但它仍然给我相同的打字稿错误Typescript错误找不到名字'谷歌'

如何使用离子2获取html元素值

在我的HTML代码下面

 <div class="messagesholder" *ngFor="let chat of chatval | orderby:'[date]'" >
   <div *ngIf="chat.sender == currentuser || chat.receiver == currentuser">
    <div  *ngIf="chat.date" style="text-align: center;" >
           <p style="font-size:9px;" id="amount" #amount>{{chat.date | amDateFormat:'LL'}}</p>
           <input #myname [ngModel]="range" (ngModelChange)="saverange($event)"/>
         <input #myname type="text" value={{chat.date}}>
    </div>
   </div>
   <div class="message" *ngIf="chat.sender == currentuser || chat.receiver == currentuser" [ngClass]="{'me': currentuser == chat.sender}">
          <div class='image' *ngIf="chat.path" >
            <img *ngIf="chat.path" [src]="chat.path"/><br>
            <span *ngIf="chat.path_text">{{chat.path_text}}</span>
            <span style="font-size:9px;">{{chat.date | amDateFormat:'hh:mmA'}}</span>
          </div> 
           <div *ngIf="chat.message_text">
           <span>{{chat.message_text}}</span>
           <span style="font-size:9px;">{{chat.date | amDateFormat:'hh:mmA'}}</span>
           </div>
    </div>

在我的ts文件下面

import { Component,Inject,ViewChild,ElementRef,AfterViewInit} …

我正在使用离子标签.一些选项卡是从数据库生成的(没有图标的选项卡)

现在当我添加一个新标签并刷新数组时,我应该得到3个动态标签.相反,我有5个(前2个和前2个具有最新创建的选项卡)尽管数组正确有3个对象.

[对象,对象,对象]

所以这里的相关代码(tabs组件有一个监听选项卡创建的事件):

// tabs.ts

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';
import { DatabaseService } from "../../providers/database.service";

import { ItemsPage } from '../items/items';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { CategoryPage } from '../category/category';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  categories: any = [];

  tab1Root = HomePage;
  tab2Root = CategoryPage;
  tab3Root = ItemsPage;
  tab4Root = ContactPage;

  constructor(public databaseService: DatabaseService, public events: Events) {
      this.events.subscribe('category:created', …

我试图使用ngFor显示选项列表但只满足某些条件,是否可以一起使用ngFor和ngIf来实现？像这样的东西:

<ion-select [(ngModel)]="task">
    <ion-option *ngFor="let task of tasks" [value]="task" *ngIf="task.ProjectId == project.Id">{{task.Title}}</ion-option>
  </ion-select>

我正在使用Ionic,并希望将音频录制到文件中,然后对文件执行某些操作.

运行于:Galaxy S4

首先,我创建文件:

await this.file.createFile(this.getFileDirectory(), this.getFileName(), true);

准备好后,我创建一个新Media实例:

this.currentRecording = this.media.create(this.getFilePath());

附加成功和错误侦听器:

this.currentRecording.onSuccess.subscribe((e) => {
  console.log(this.currentRecording.getDuration());
  this.file.readAsArrayBuffer(this.getFileDirectory(), this.getFileName())
          .then(file => console.warn(file))
});
this.currentRecording.onError.subscribe((err) => console.error(err));

然后我开始录音: this.currentRecording.startRecord();

几秒钟后,我停止录制this.currentRecording.stopRecord(),并执行成功回调.

在控制台中,我现在看到了

-1 // console.log(this.currentRecording.getDuration());

ArrayBuffer {} // console.warn(file);

难道我做错了什么？它怎么解决成功,但没有文件,没有持续时间？

编辑

复制存储库:https://github.com/AmitMY/ionic-media-record-repro

README有完整的说明

我试图将Applozic聊天平台集成到我的Ionic 2项目中,我希望将其导出到Web,Android和iOS.使用示例作为基础并为Javascript集成过程创建applozic.d.ts和applozichv.js.

applozic.d.ts

interface AppLozicStatic {
    initPlugin(): any;
}

declare var AppLozic : AppLozicStatic;
export = AppLozic;

applozichv.js

(function () {
    var root = this;

    var AppLozic = function (obj) {
        if (obj instanceof AppLozic) return obj;
        if (!(this instanceof AppLozic)) return new AppLozic(obj);
        // this.EXIFwrapped = obj;
    };

    if (typeof exports !== 'undefined') {
        if (typeof module !== 'undefined' && module.exports) {
            exports = module.exports = AppLozic;
        }
        exports.AppLozic = AppLozic;
    } else …