Angular, Blockchain, Science とか

Angular, Blockchain, Science全般 の情報を主に書いていきます。

【3】Angular v4 ngFor と ngIf

今回は、For文とIf文を見ていきたいと思います。普通の書き方なので、特に難しいところはありません。

まずFor文を見ていきます。

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <h2 *ngFor='let angular of AngularList'>
    {{ angular }}
    </h2>
    `,
})
export class AppComponent {
  title = 'Hello World!!';
  angularList = ["AngularJS", "Angular2", "Angular4"];
}

見てわかる通りです。

ngFor='let foo of fooList' という風になります。

let of を覚えておけばとりあえずOK。

続いて、Dict。

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <h2 *ngFor='let angular of angularDict'>
    <a href='{{ angular.slug }}'>{{ angular.name }}
    </a>
    </h2>
    `,
})
export class AppComponent {
  title = 'Hello World!!';
  angularDict = [
    {
      name: "AngularJS",
      slug: "angularjs"
    },
    {
      name: "Angular2",
      slug: "anuglar2"
    },
    {
      name: "Angular4",
      slug: "angular4"
    }
  ]
}

.name .slug といった形でアクセスします。特に違和感はないと思います。

続いてIf文を入れて、Angular4だけ表示するようにします。

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <h2 *ngFor='let angular of angularDict'>
    <a href='{{ angular.slug }}' *ngIf='angular.name=="Angular4"'>
    {{ angular.name }}
    </a>
    </h2>
    `,
})
export class AppComponent {
  title = 'Hello World!!';
  angularDict = [
    {
      name: "AngularJS",
      slug: "angularjs"
    },
    {
      name: "Angular2",
      slug: "anuglar2"
    },
    {
      name: "Angular4",
      slug: "angular4"
    }
  ]
}

となります。 *ngIf='angular.name=="Angular4"' といった形になります。これも特に違和感なく直観的な理解ができると思います。

とりあえず、ngFor ngIfの基本はこんな感じです。色々いじってみましょう。

おしまい