Angular4入門_Vol.2

参考サイト

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

6 - ngFor & ngIf

• ngForのテストをするために、video-list.component.tsを修正する。

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

@Component({
  selector: 'video-list',
  templateUrl: './video-list.component.html',
  styleUrls: ['./video-list.component.css']
})
export class VideoListComponent implements OnInit {
  title = "tenshinoenogu!";
  videoList = ["Item 1", "Item 2", "Item 3"]; //listを追加
  constructor() { }

  ngOnInit() {
  }

}

• 該当のtemplateUrlのhtmlを修正する。

<p>
  {{ title }}
</p>

<p *ngFor='let item of videoList'>
  {{ item }}
</p>

• これで、videoListに格納されているvalueが表示される。

• さらにvideoListに、オブジェクトリストを格納してみる。

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

@Component({
  selector: 'video-list',
  templateUrl: './video-list.component.html',
  styleUrls: ['./video-list.component.css']
})
export class VideoListComponent implements OnInit {
  title = "Video List!";
  // videoList = ["Item 1", "Item 2", "Item 3"]; Json object
  videoList = [
    {
      name: "Item 1",
      link: "item-1"
    },
    {
      name: "Item 2",
      link: "item-2"
    },
    {
      name: "Item 3",
      link: "item-3"
    },
  ]
  constructor() { }

  ngOnInit() {
  }

}

• object listからvalueを取り出すためにhtmlを修正する。

<p>
  {{ title }}
</p>

<p *ngFor='let item of videoList'>
  <a href="{{ item.link }}">{{ item.name }}</a>
</p>

• django風にわかりやすくするために、videoListのobjectのlinkをslugにする。

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

@Component({
  selector: 'video-list',
  templateUrl: './video-list.component.html',
  styleUrls: ['./video-list.component.css']
})
export class VideoListComponent implements OnInit {
  title = "Video List!";
  // videoList = ["Item 1", "Item 2", "Item 3"];
  videoList = [
    {
      name: "Item 1",
      slug: "item-1"
    },
    {
      name: "Item 2",
      slug: "item-2"
    },
    {
      name: "Item 3",
      slug: "item-3"
    },
  ]
  constructor() { }

  ngOnInit() {
  }

}

• *ngIfを使ってみる。

<p>
  {{ title }}
</p>

<p *ngFor='let item of videoList'>
  <a href="{{ item.slug }}" *ngIf='item.slug == "item-1"'>{{ item.name }}</a>
  <a href="{{ item.slug }}" *ngIf='item.slug != "item-1"' style='color:red;'>{{ item.name }}</a>
</p>

• django風に書くと{% for item in videoList %}ってところだね。

• 重要なのは、ngFor, ngIfは、

  などtagの塊ごとに、評価されるところかな。

• {}で囲まれたものをjavascript object、単にvalueのlistの場合を、JSONobjectとよんでいた。これはできるだけ、そのような認識で統一するようにしよう。

まとめ

• ngForなどはtagの塊ごとに適用される。
• 文法などはdjangoのtemplate engineに少し似てる。