選択のためにマップを使用するngModel

Question

マップを使用して、データテーブルの各行に対して選択した値を保持したいと考えています。私はレコードオブジェクトに特別なフィールドを追加することを避けたいと思います。ここで私はhttp://plnkr.co/edit/OKqZ80?p=infoと例コンポーネントのリストを行うにしようとしています何のPlunkerです：

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

export class Hero { 
    constructor(
    public id: number, 
    public name: string, 
    // public power: string, // I do not have a power field in the actual class I am using 
    public alterEgo?: string 
) { } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
<h1>Select with Map</h1> 
<table> 
    <tbody> 
    <tr> 
     <th>Hero</th> 
     <th>Power</th> 
    </tr> 
    <tr *ngFor="let hero of heroes"> 

     <td>{{hero.name}}</td> 

     <td> 

     <select [(ngModel)]="selectedPowers[hero.name]"> 
      <option *ngFor="let power of powers" [ngValue]="power">{{power}}</option> 
     </select> 

     </td> 

    </tr> 
    </tbody> 
</table> 

<pre>{{ selectedPowers | json }}</pre> 
` 
}) 
export class AppComponent implements OnInit { 
    heroes: Hero[] = new Array<Hero>(); 
    powers = ['Really Smart', 'Super Flexible', 
      'Super Hot', 'Weather Changer']; 
    selectedPowers: Map<string, string> = new Map<string, string>(); 

    ngOnInit() { 
    this.heroes.push(new Hero(11, 'Mr. Nice')); 
    this.heroes.push(new Hero(12, 'Narco')); 
    this.heroes.push(new Hero(13, 'Bombasto')); 
    this.heroes.push(new Hero(14, 'Celeritas')); 

    this.selectedPowers.set(this.heroes[0].name, this.powers[0]); 
    } 
} 

私は二つのことを達成しようとしています：最初、私は、ドロップダウンが各英雄のために選択された電力を表示したいです。次に、selectedPowersフィールドにテーブルの変更を反映させます。

Plunkerバージョンには問題があるようです。ローカルノードプロジェクトとして実行すると、PREタグによってドロップダウンに加えた変更が表示されます。

編集1：私は実際のクラスにパワーフィールドを持っていません。 Plunkerも変更しました。あなたは以下試すこと

Answer 1

、ここで

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

export class Hero { 
    constructor(
    public id: number, 
    public name: string, 
    public power: string, 
    public alterEgo?: string 
) { } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
<h1>Select with Map</h1> 
<table> 
    <tbody> 
    <tr> 
     <th>Hero</th> 
     <th>Power</th> 
    </tr> 
    <tr *ngFor="let hero of heroes"> 
     <td>{{hero.name}}</td> 
     <td> 
     <select (change)="changePower(hero.name, $event.currentTarget.value)"> 
      <option *ngFor="let power of powers" [value]="power" [selected]="power === hero.power" >{{power}}</option> 
     </select> 
     </td> 
    </tr> 
    </tbody> 
</table> 

<pre>{{ selectedPowers | json }}</pre> 
` 
}) 
export class AppComponent implements OnInit { 
    heroes: Hero[] = new Array<Hero>(); 
    powers = ['Really Smart', 'Super Flexible', 
      'Super Hot', 'Weather Changer']; 
    selectedPowers: Map<string, string> = new Map<string, string>(); 

    changePower(heroName,power){ 
    this.selectedPowers.set(heroName, power); 
    } 

    ngOnInit() { 
    this.heroes.push(new Hero(11, 'Mr. Nice', this.powers[0])); 
    this.heroes.push(new Hero(12, 'Narco',  this.powers[1])); 
    this.heroes.push(new Hero(13, 'Bombasto', this.powers[2])); 
    this.heroes.push(new Hero(14, 'Celeritas', this.powers[3])); 
    this.heroes.push(new Hero(15, 'Magneta', this.powers[0])); 
    this.heroes.push(new Hero(16, 'RubberMan', this.powers[1])); 
    this.heroes.push(new Hero(17, 'Dynama', this.powers[2])); 
    this.heroes.push(new Hero(18, 'Dr IQ',  this.powers[3])); 
    this.heroes.push(new Hero(19, 'Magma',  this.powers[0])); 
    this.heroes.push(new Hero(20, 'Tornado', this.powers[1])); 

    // this.selectedPowers.set(this.heroes[0].name, this.powers[0]); 
    } 
} 

はPlunker!!

は、この情報がお役に立てば幸いです！