Angular2：ngForにmapオブジェクトを適用する(カスタムパイプを使用)

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    
    <!-- [ Load: Environment Library ] -->
    <script src="https://unpkg.com/zone.js@0.7.2/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js@0.7.2/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    
    <!-- [ Load: Angular2 Library ] -->
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: {
          emitDecoratorMetadata: true,
          skipLibCheck: true, // ライブラリのnull許容チェックをスキップ
          strictNullChecks: true, // null許容チェックを有効
        },
        paths: {
          // 'cdn'の定義
          'cdn:': 'https://unpkg.com/',
        },
        map: {
          'typescript': 'cdn:typescript@2.1.4',
          'rxjs'      : 'cdn:rxjs@5.0.1',
          '@angular/core'                    : 'cdn:@angular/core@2.3.0',
          '@angular/common'                  : 'cdn:@angular/common@2.3.0',
          '@angular/compiler'                : 'cdn:@angular/compiler@2.3.0',
          '@angular/platform-browser'        : 'cdn:@angular/platform-browser@2.3.0',
          '@angular/platform-browser-dynamic': 'cdn:@angular/platform-browser-dynamic@2.3.0',
          '@angular/http'                    : 'cdn:@angular/http@2.3.0',
          '@angular/router'                  : 'cdn:@angular/router@3.3.0',
          '@angular/forms'                   : 'cdn:@angular/forms@2.3.0',
        },
        packages: {
          app: { defaultExtension: 'ts' },
          rxjs: { defaultExtension: 'js' },
        },
      });

      System.import('app/main.ts').catch(console.error.bind(console));
    </script>
    
    <style>
      @import url(https://fonts.googleapis.com/css?family=Lato:400,700);
      body{
          font-family: Lato;
      }
    </style>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { Component, NgModule, Pipe, PipeTransform } from '@angular/core';

/**
 * MapオブジェクトからKeyの配列に変換するカスタムパイプ
 */
@Pipe({ name: 'appMapToKeys' })
export class MapToKeysPipe implements PipeTransform
{
  transform(map: Object): any[]
  {
    return Object.keys(map);
  }
}

/**
 * Main Application Component
 */
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello</h2>
      <p *ngFor="let key of (_map | appMapToKeys)">{{key}}: {{_map[key]}}</p>
    </div>
  `,
})
export class App
{
  private _map = new Map<string, number>();
  
  public constructor()
  {
    this._map['a'] = 10;
    this._map['b'] = 20;
    this._map['c'] = 30;
  }
}

/**
 * Application Module
 */
@NgModule({
  imports: [BrowserModule],
  declarations: [App, MapToKeysPipe], // カスタムマップを「declarations」に指定
  bootstrap: [App],
})
export class AppModule
{
}

platformBrowserDynamic().bootstrapModule(AppModule);