代码之家 › 专栏 › 技术社区 › Deadpool

将Angular4中的[ngStyle]绑定到ngModel或双向绑定

two-way-binding angular javascript

0

Deadpool · 技术社区 · 8 年前

我正在尝试制作一个输入框并添加颜色。同样的颜色应该加到段落的背景上我在努力,但有错误。有人能帮忙吗?

主页.html

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

主页.ts

  colorName: string = 'red';

注意:我只想用[ngStyle]和双向绑定角度4

3 回复 | 直到 8 年前

1

3

Pardeep Jain 8 年前

把引号从 colorName 在css属性中添加quotos,如下所示-

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

Working Example

2

1

Osakr 8 年前

这样做:

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

3

1

Krishna Rathore 8 年前

您可以在中添加 background-color

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