読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

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に少し似てる。