Angular4入門_Vol.11

参考サイト

https://www.codingforentrepreneurs.com/projects/try-angular-v4/

Http & Featured

• home.component.tsのimageのlinkもvideos.JSONデータに組み込む。

[
  {
    "name": "テスト1",
    "slug": "item-1",
    "embed": "kzjMI00A1f8",
    "image": "assets/images/nature/4.jpg"
  },
  {
    "name": "Item 2",
    "slug": "item-2",
    "embed": "kzjMI00A1f8",
    "image": "assets/images/nature/5.jpg"
  },
  {
    "name": "Item 3",
    "slug": "item-3",
    "embed": null,
    "image": "assets/images/nature/6.jpg"
  }
]

• home.component.htmlを修正する。homeImageListをJSONデータから読むこむ前提で、プロパティなどを設定する。

<div class="row">
  <div class="col-sm-12">
  <carousel class='text-center'>
    <slide *ngFor='let imageObj of homeImageList'>
      <a class='' href="/videos/video-1" (click)='preventNormal($event, imageObj)'>
      <img class='img-main-carousel' [src]="imageObj.image" alt="First slide">
      </a>
      <div class="carousel-caption">
        <h3>{{imageObj.name}}</h3>
        <p><a class='btn btn-default' href='/videos/{{ imageObj.slug }}'>View</a></p>
      </div>
    </slide>
  </carousel>
  </div>
</div>

• home.component.tsを修正する。

import { Component, OnInit, OnDestroy } from '@angular/core'; // OnDestroyを追加でimportする
import { Router } from '@angular/router';
import { Http } from '@angular/http'; // Httpモジュールをimport

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy { // implementsにOnDestroyを追加
  private req: any; // req変数を定義
  homeImageList = [
    {image: "assets/images/nature/4.jpg", name: "Image 4", slug:'video-1'}, //JSONデータに合わせて、修正する。
    {image: "assets/images/nature/5.jpg", name: "Image 5", slug:'video-1'},
    {image: "assets/images/nature/6.jpg", name: "Image 6", slug:'video-1'}
  ]

  constructor(private http:Http, private router:Router) { } // http:Httpで、型定義する。

  ngOnInit() {
    this.req = this.http.get('assets/json/videos.json').subscribe(data=>{ //subscribeしてsuccessのときの処理を定義する。
      console.log(data.json())
      this.homeImageList = data.json();
    })
  }

  ngOnDestroy(){ // ngOnDestroyで、unsubscribeする。
    this.req.unsubscribe()
  }

  preventNormal(event:MouseEvent, image:any){
    if (!image.prevented){
      event.preventDefault()
      // image.link = '/videos'
      // image.prevented = true;
      this.router.navigate(['./videos'])
  }
}

}

• これでとりあえず、一旦homeにアクセスしてみる。。。無事表示された！(^^)

• 次にhomeImageListのデフォルトデータを削除して、*ngIfで、homeImageListの有無を確認して、データを読み込むように設定する。（前回の講義で発生したerrorを避けるため）

<div class="row">
  <div class="col-sm-12">
  <carousel class='text-center' *ngIf='homeImageList'>
    <slide *ngFor='let imageObj of homeImageList'>
      <a class='' href="/videos/video-1" (click)='preventNormal($event, imageObj)'>
      <img class='img-main-carousel' [src]="imageObj.image" alt="First slide">
      </a>
      <div class="carousel-caption">
        <h3>{{imageObj.name}}</h3>
        <p><a class='btn btn-default' href='/videos/{{ imageObj.slug }}'>View</a></p>
      </div>
    </slide>
  </carousel>
  </div>
</div>

• これで、再度homeにアクセスしてみる。。。できた！(^^)

• JSONデータにあらたにFeaturedという項目を追記する。

[
  {
    "name": "テスト1",
    "slug": "item-1",
    "embed": "kzjMI00A1f8",
    "image": "assets/images/nature/4.jpg",
    "featured": true
  },
  {
    "name": "Item 2",
    "slug": "item-2",
    "embed": "kzjMI00A1f8",
    "image": "assets/images/nature/5.jpg",
    "featured": true
  },
  {
    "name": "Item 3",
    "slug": "item-3",
    "embed": null,
    "image": "assets/images/nature/6.jpg"
  }
]

• home.component.tsの方で、featuredでhomeImageListにfilterをかける。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Http } from '@angular/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {
  private req: any;
  homeImageList = [
    // {image: "assets/images/nature/4.jpg", name: "Image 4", slug:'video-1'},
    // {image: "assets/images/nature/5.jpg", name: "Image 5", slug:'video-1'},
    // {image: "assets/images/nature/6.jpg", name: "Image 6", slug:'video-1'}
  ]

  constructor(private http:Http, private router:Router) { }

  ngOnInit() {
    this.req = this.http.get('assets/json/videos.json').subscribe(data=>{
      console.log(data.json())
      data.json().filter(item=>{ // ngOnInitで、featuredの値でfilterする。
        if(item.featured){
          this.homeImageList.push(item)
        }
      })
      // this.homeImageList = data.json();
    })
  }

  ngOnDestroy(){
    this.req.unsubscribe()
  }

  preventNormal(event:MouseEvent, image:any){
    if (!image.prevented){
      event.preventDefault()
      // image.link = '/videos'
      // image.prevented = true;
      this.router.navigate(['./videos'])
  }
}

}

まとめ

• Http モジュールは、いまのところかなり便利ぽい。
• json()データのfilterも比較的シンプルにできる。
• defaultデータがない変数にjsonデータを代入する場合は、*ngIfでデータの有無を確認する必要（データの読み込みのtry？）が必要なのか？