Brighten up your day !!

Ionicの忘備録

Ionicの忘備録

0

Observableなオブジェクトの作成

import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
・
・
  constructor(
    private client:HttpClient
  ) { }  
・
・
devTestObservable(myStr):Observable<any> {
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(myStr+'myObservable');
      }, 1000);
    })
  }

  devTestPromise() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('myPromise');
      }, 1000)
    })
  }

  devTestHttp():Observable<any> {
    return new Observable(observer => {
        this.client.get('/assets/data/test.json').subscribe(e =>{
          observer.next(e);
        })
    })
  }

Copy

  
import { DataService } from '../tabs/data.service';
import { HttpClient } from '@angular/common/http';
・
・
  constructor(
    private dataService:DataService,
    private client:HttpClient,
  ) {
      this.myStr = 'first ';
  }
・
・
async onButtonClick(){

    this.dataService.devTestHttp().subscribe(e =>{
      console.log(e,'Hi');
      this.myStr = e.authAdmin.linkLoginButton+'Hi';
    })

    this.dataService.devTestObservable().subscribe(e =>{
      console.log(e);
    })

    this.dataService.devTestPromise().then(e =>{
      console.log(e);
    })

  }

Copy

input

<ion-item lines=’full’><ion-label position=’floating’>らべる</ion-label><ion-input type=’text’></ion-input></ion-item>

inputには、最初にplaceholderが表示されていて、フォーカスをあてるとplaceholderのラベルが左上に移動するものが一番いいです。

こんな感じになります。

フォーカス前

フォーカス後

ボタン

横いっぱいに広がったよく見るボタンが表示されます。クリック時の関数は(click)=で指定します。

<div><ion-button expand=’block’ (click)=”someFunc()”>Button</ion-button></div>

新しい部品をつくる

ionic g

とだけ入力すれば、下記の選択肢を表示してくれます。

0

⭐️Brighten up your day with NP-Systems⭐️


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


  • 3月15日AngularでAdsense

    更新日時:2021年3月15日 06時46分

    0 もう3月を中旬ですね。もう春ですね!Yoasobiに最高にハマっています。 昨日ようやくAngular(Ionic)でAdsenseを表示できるようになりました。 http://ocr-app.np-sys.com/…


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


this is single-default.php