ngStyle funktioniert nicht in Angular

Question

Ich lerne Angular. Ich folgte Tutorial bei - Angular 2 Component Interaction - Extended Components Example

Ich versuche, die Farbe des Textes zu ändern, indem Sie auf Farboptionen klicken. Hier ist, was ich in app.component.ts haben -

 import { Component, Output, EventEmitter, Input } from '@angular/core'; 

@Component ({ 
    selector:'my-app', 
    template:`<div class='color-picker'> 
    <div class="color-title" [ngStyle]="{'color':color}">Pick a color</div> 
    <div class='color-picker-wrp'> 
    <div class='color-sample color-sample-blue' (click)="choose('blue')" ></div> 
    <div class='color-sample color-sample-red' (click)="choose('red')" ></div> 
    </div> 

</div>` 
, 
styleUrls:['picker.css'] 
}) 
export class AppComponent { 
    @Input() 
    color:string; 

    @Output("color") 
    colorOutput = new EventEmitter(); 

    choose(color:string) 
    {  
    this.colorOutput.emit(color); 
    console.log(color); 
    } 
} 

ich eine Plunker erstellt haben - https://plnkr.co/edit/ryvw9W220EvLxMSqCCh8?p=preview

Die Farbe nicht auf den Titel angewendet wird - Wählen Sie eine Farbe, aber es ist in der Konsole angemeldet ist richtig . Nachdem ich verwandte Artikel gelesen hatte, konnte ich diese Arbeit nicht machen.

Answer 1

Ich glaube, Sie Farbe des Textes Pick a color auf Klick von farbigen div ändern möchten so choose Funktion verändern, wie unten:

choose(color:string) {  
    this.colorOutput.emit(color); 
    this.color= color; 
    console.log(color); 
}