iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
0
Modern Web

Angular初期筆記系列 第 30

DAY30-Angular6之 HttpClient 實作

在 module 匯入 HttpClientModule

app.module.ts
------
import { HttpClientModule } from '@angular/common/http';

@NgModule({
    declarations: [
        AppComponent,
        HttpTestComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

在 component 匯入 HttpClient

component.ts
-----
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

下載 json 並放到 assets 資料夾

新北市政府福利補助資訊
http://data.ntpc.gov.tw/od/detail?oid=73C24D1C-E1F0-44CE-8A31-CF835EF37E74#
進入 API 介接的 JSON,案右鍵「另存新檔」
將檔案移到:專案資料夾/src/assets

備註:原本是想說直接把 JSON 網址放進去,但是 CORS 問題實在有點麻煩,所以還是下載 JSON 比較方便

直接看 Code

component.ts
-----
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { filter, switchMap, mergeMapTo, debounceTime, tap, catchError } from 'rxjs/operators';
import { fromEvent, from } from 'rxjs';

@Component({
  selector: 'app-http-test',
  templateUrl: './http-test.component.html',
  styleUrls: ['./http-test.component.css']
})
export class HttpTestComponent implements OnInit {
  apiData;
  apiFilterData;
  arrayData = [];
  surchValue = '';
  filterEvent;
  errorMessage;
  apiObserver = {
    next: x => {
      this.arrayData.push(x);
    },
    error: error => { console.log(error); },
    complete: () => console.log('finish')
  };

  constructor(private http: HttpClient) {
    this.apiData = this.http.get('../../assets/g0v.json')
      .pipe(switchMap(e => from(e)));  // switchMap(e => from(<any>e)) 再把 <any> 加入進去

    // 資料篩選的 observable
    this.apiFilterData = this.apiData
      .pipe(
        filter((x: any) => x['NAME'].includes(this.surchValue))
      );
  }

  ngOnInit() {
    // 初次取得資料
    this.apiData
      .pipe(catchError(error => {
        this.errorMessage = '啊!我錯了!';
        throw new Error(`hello${JSON.stringify(error)}`);
      }))
      .subscribe(this.apiObserver);

    // 監聽輸入框 ,篩選取得資料
    this.filterEvent = fromEvent(document.getElementById('filterInput'), 'input')
      .pipe(
        tap((e: any) => {
          this.arrayData = [];
          this.surchValue = e.target.value; // 將輸入框的值 放進surchValue
        }),
        debounceTime(1000), // 一秒內若都無動作才會 emit 資料出去
        mergeMapTo(this.apiFilterData), // 替換成要顯示的 observable
        catchError(error => {
          this.errorMessage = '啊!';
          throw new Error(`hello${JSON.stringify(error)}`);
        })
      )
      .subscribe(
        this.apiObserver
      );
  }
}
html
-----
<div class="container">
  <h1>新北市政府福利補助資訊</h1>
  <br>
  <input class="form-control" placeholder="想查詢的相關字彙" type="text" name="filterInput" id="filterInput">
  <br>
  <br>
  <div class="row">
    <div class="col-sm-6" *ngFor="let item of arrayData; let i=index">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">名稱:{{item.NAME}}</h5>
          <p class="card-text">福利說明:</p>
          <p>{{item.SERVICE_DESC}}</p>
          <br>
          <p class="card-text">承辦單位: </p>
          <p>{{item.CONT1}}</p>
          <br>
          <p class="card-text">應備證件: </p>
          <p>{{item.CONT2}}</p>
          <br>
          <p class="card-text">申請方式: </p>
          <p>{{item.CONT3}}</p>
          <br>
          <p class="card-text">交付方式: </p>
          <p>{{item.CONT4}}</p>
          <br>
          <p class="card-text">處理期限: </p>
          <p>{{item.CONT5}}</p>
          <br>
          <p class="card-text">備註欄: </p>
          <p>{{item.CONT6}}</p>
          <br>
          <p class="card-text">補助內容: </p>
          <p>{{item.CONT7}}</p>
          <br>
          <p class="card-text">申辦E服務: </p>
          <p>{{item.C}}</p>
          <br>
          <p class="card-text">表單下載網址: </p>
          <p>{{item.CURL}}</p>
          <br>
          <p class="card-text">福利項目編號: </p>
          <p>{{item.ID}}</p>
          <br>
          <p class="card-text">建立日期: </p>
          <p>{{item.DATE_CREATED}}</p>
          <br>
          <p class="card-text">最後更新日期: </p>
          <p>{{item.LAST_UPDATED}}</p>
        </div>
      </div>
      <br>
    </div>
  </div>
</div>

顯示
https://ithelp.ithome.com.tw/upload/images/20181109/201077540fRJHiqu47.png

最後結尾啦

記得去上課的時候被提醒,RxJS 、Array、Object 的用法,基本就是資料處理的關鍵,(後面是自己腦補)懂得他們基本上就像是魔法師多學會一項魔法,在著火時可以放水彈,在逃跑時可以放出煙霧,在攻擊時可以放出雷電一樣,假如你只會雷電就等於在著火時只能靠雷電滅火!處理狀況就相對不利,所以自己也要再精進自己的魔法技能呀!在面對事情就能兵來將擋水來土掩了!

原先設定是把之前學過的再複習一遍比較針對不懂得慢慢帶入,但是不小心從官網看到更多事情,就從複習變成學習,但應當也是慢慢帶入吧!希望這一系列文章有幫助到人。下台一鞠躬啦!


上一篇
DAY29-Angular6之 HttpClient 基礎說明
系列文
Angular初期筆記30

尚未有邦友留言

立即登入留言