在 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>

顯示

最後結尾啦

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

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