ngModel使用Map進行選擇

Question

我想使用Map來爲我的數據表中的每一行保存選定的值。我想避免在記錄對象中添加一個特殊字段。這裏是什麼，我試圖做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!!

希望這有助於！