将Angular4中的[ngStyle]绑定到ngModel或2种方式绑定

Question

我正在尝试制作一个输入框并为其添加颜色。 相同的颜色应添加到段落的背景。 我正在尝试但出现错误。 有人可以帮忙吗？

home.html

<input type="text" [(ngModel)]="colorName"/>
<p [ngStyle]="{background-color:'colorName'}">This is a paragraph.</p>

home.ts

  colorName: string = 'red';

注意：我只想在Angular4中使用[ngStyle]和2向绑定来执行此操作

Answer 1

只需从colorName删除quotos，然后在css属性中添加quotos，如下所示：

<input type="text" [(ngModel)]="colorName"/>
<p [ngStyle]="{'background-color':colorName}">This is a paragraph.</p>

工作实例

Answer 2

像这样做：

<p [ngStyle]="{'background-color':colorName}">This is a paragraph.</p>

Answer 3

您可以在background-color添加''

<input type="text" [(ngModel)]="colorName"/>
<p [ngStyle]="{'background-color':colorName}">This is a paragraph.</p>