标签: ionic2

我开始使用来自Angular 1的Angular 2,我无法想象如何在对象的属性上使用ngFor. this.myVar根据HTTP请求的结果定义,该请求定义attr属性.

这是我的代码:

# my_page.ts
import {Page} from 'ionic-angular';
import {MyService} from '../../services/my_service';

@Page({
  templateUrl: 'build/pages/my_page/my_page.html',
  providers: [MyService]
})


export class MyPage {
  public myVar;

  constructor(private myService: MyService) {
    this.myService.fetch().subscribe(
      data => this.myVar = data
    );
  }
}

# my_page.html
<div *ngFor="#item of myVar.attr">
</div>

这是错误:

EXCEPTION:TypeError:无法读取[myVar.attr in ...中的undefined属性'attr'

谢谢!

我用IONIC-2 Beta版制作了一个应用程序.我想使用for-each循环.是否有可能在角度-V2中使用？

谢谢.

我熟悉Angular2,Ionic2,也许我误解了一些东西,但希望得到帮助.

我有一个名为'CurrentUser'的提供程序,用于存储和获取LocalStorage数据.

     getProfile(): any {
      this.local.get("user-profile").then((profile) => {
      var val = JSON.parse(profile);
      return val;
  });
}

这个函数getProfile()返回一个promise

如果我将此提供程序注入组件中.在从组件调用此函数时,如何在分配数据之前等待解析的承诺？

@Component({
   templateUrl: 'build/pages/book_meeting/book_meeting.html'
})
 export class BookMeetingPage implements OnInit {
 constructor(public navCtrl: NavController, private _currentUser: CurrentUser) {
}

profile: IProfile;

   ngOnInit(): any {
   this.profile = this._currentUser.getProfile();
   console.log(this.profile);//returns undefined
  }
}

问题

我不知道如何使用getUserHeaders()我当前返回的Observable的值http.get.

当前错误

Type 'Observable<void>' is not assignable to type 'Observable<Participant[]>'

预期结果

能够使用我的Observable返回方法的值getUserHeaders()作为调用中的headers属性http.而只返回http调用的Observable.

以前的代码

(使用由getUserHeaders()(不是Observable或者Promise)返回的harcoded Headers .

getAllParticipants(): Observable<Array<Participant>> {
    return this.http.get('someUrl',
                {headers: this.getUserHeaders()})
           .map(response => {
               return response.json();
        });
    });
   }

目前的代码

通过使用TypeScript的答案从Angular2中的http数据链接RxJS Observables,我来到了该flatMap方法.(注意此代码当前抛出'当前错误')

getUserHeaders(): Observable<Headers> {
        let headers: Headers = new Headers();

        return NativeStorage.getItem("user").map(
            data => {
                headers.append('API_KEY', data.json().apiKey);
                headers.append('DEVICE_ID', data.json().deviceId);
                return …

我现在能够在视图中获取对象但是我无法运行if语句.根据之前的回答,这就是我引入对象的方式.

public getPosts$(category, limit) {
  return this.cartService.getPosts(category, limit).map(response => {
    return response && response.data && response.data.children;
  };
}

ngOnInit() {
  this.getPosts$(this.category, this.limit).subscribe(cart => {
    this.cart = cart;
  }
}

我想跑,但得不到财产蔬菜.

<h2 *ngIf="cart">{{cart.vegetable}}</h2>
<h2 *ngIf="cart.vegetable == 'carrot' ">{{cart.vegetable}}</h2>

错误是

无法读取未定义的属性'vegtable'

我试图通过安全的api请求图像.目前我已经完成了以下工作(请参阅下面我使用的所有资源.

import { AssetsService } from '../../services/AssetsService';
import { Component } from '@angular/core';

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

    public img;

    constructor(
        public assets_service: AssetsService
    ) { }

    public async ionViewDidEnter() {
        this.img = await this.assets_service.picture_request('test.png');
    }
}

我的看法

<img [src]="img | safe" />

现在我已经看到了看起来很有希望的异步管道.正如您可能已经猜到的那样,我真的不想对我想通过上面使用的api请求的每个图像使用viewmodel属性.

我想picture_request直接从html视图使用异步调用.这将节省我在viewmodel中的所有管道.从我所读到的东西,像这样的东西应该工作,但只有它不可悲.

<img [src]="assets_service.picture_request('test.png') | async | safe" />

我不确定我是使用async pipe正确还是使用正确的方法.如果我不是我的方法应该是什么？任何帮助表示赞赏.仅供参考:我使用角度2与离子2结合使用.

我用过的其他资源:

我的安全管

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: …

我不能建立我的离子2应用程序.更改文件后服务工作.

在离子服务上,我收到以下错误消息:

[07:36:10]  ionic-app-scripts 1.0.0 
[07:36:10]  watch started ... 
[07:36:10]  build dev started ... 
[07:36:10]  clean started ... 
[07:36:10]  clean finished in 1 ms 
[07:36:10]  copy started ... 
[07:36:10]  transpile started ... 
[07:36:15]  build dev failed: Maximum call stack size exceeded 
[07:36:15]  dev server running: http://localhost:8100/ 

然后,当我更改*.ts文件时,应用程序已构建并可以使用

[07:37:32]  build started ... 
[07:37:32]  transpile started ... 
[07:37:39]  build finished in 6.81 s 

当我运行ionic build时,会显示以下错误消息:

[07:40:40]  transpile started ... 
[07:40:44]  build dev failed: Maximum call stack size exceeded 
[07:40:44]  ionic-app-script task: "build" …

我有以下代码使用Ionic Native Geolocation:

import { Geolocation } from 'ionic-native';

    this.platform.ready().then(() => {
        alert('loadMap about to getCurrentPosition');
          Geolocation.getCurrentPosition(options).then((position) => {
        alert('loadMap getCurrentPosition');
            let latLng: google.maps.LatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            bound.extend(latLng);
            this.load(bound);
          });
    });

当我ionic serve在浏览器中运行它时,或者我构建它并在iOS Simulator(Xcode)上运行它时,它可以工作.但是,当我构建它Android并尝试运行它时,第一个警报被触发,但不是第二个.

这Android仅仅意味着,Geolocation.getCurrentPosition...不起作用.

我确实有另一个可以渲染地图的页面this.map = new google.maps.Map(htmlElement, mapOptions);,所以看起来问题在于获取当前位置.当我安装应用程序时,我确实得到了这条消息:

Allow AppName to access the device's location?
DENY    ALLOW

Run Code Online (Sandbox Code Playgroud)

我点击了Allow.

有没有人知道我做错了什么,或者Android安装和构建过程中是否有一些缺失的步骤？

谢谢

如果收到通知,我会尝试更改徽章的价值,但如果您有任何想法可以帮助我,我不会来交换.

tabs.ts

import { Component, ViewChild } from '@angular/core';

import { SQLite, Dialogs, Firebase } from 'ionic-native';
import { NavController, Platform, Tabs } from 'ionic-angular';
import { HomePage } from '../home/home';
import { NotificationPage } from '../notification/notification';
import { MessagesPage } from '../messages/messages';
import { MoiPage } from '../moi/moi';

import {GlobalVars} from '../../providers/varglobal'
import {Injectable} from '@angular/core';

@Injectable()

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

export class TabsPage {
  // this tells the tabs componnent which Pages
  // should be each tab's root …

题:

我如何@ VIMEO /播放器在我的Angular2 /打字稿项目(特别是Ionic2)工作？

描述:

试图让vimeo 播放器使用Angular2/Typescript.

npm install --save @vimeo/player

根据他们的文档,库可以像这样使用:

如果您正在使用webpack或汇总等模块捆绑器,则导出的对象将是Player构造函数(与它附加到window.Vimeo的浏览器不同):

import Player from '@vimeo/player';

const player = new Player('handstick', {
    id: 19231868,
    width: 640
});

player.on('play', function() {
    console.log('played the video!');
});

哪个看起来很有前途!但是不起作用.

我尝试过的:

我安装了@vimeo/player,@types/vimeo__player 我在Ionic2应用程序中创建了一个播放器组件.

player.ts:

import {Component, ViewChild} from '@angular/core';
import {NavController} from "ionic-angular/index";

//noinspection TypeScriptCheckImport,TypeScriptCheckImport
import Player from "@vimeo/player";


@Component({
  selector: 'player-component',
  templateUrl: 'player.html'
})
export class PlayerComponent {

  @ViewChild('player_container') playerContainer;
  private player: Player;

  constructor(public navCtrl: NavController){} …