ngStyle在Angular中不起作用

Question

我正在学习Angular。 我遵循的教程位于-Angular 2组件交互-扩展组件示例

我正在尝试通过单击颜色选项来更改文本的颜色。 这是我在app.component.ts中拥有的-

     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);
   }
}

我已经创建了一个小矮人-https://plnkr.co/edit/ryvw9W220EvLxMSqCCh8 ? p = preview

该颜色未应用于标题-选择一种颜色，但是已正确登录控制台。 阅读相关文章后，我无法进行这项工作。

Answer 1

我认为您想更改文本Pick a color ，请在单击彩色div时Pick a color ，以便更改choose功能，如下所示：

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