Question

我有一个像这样的对象列表{name：'Susan'，数字：1}。我需要根据数字显示颜色的名称（如果数字是1，则名称必须是红色，如果是2蓝色，如果是3绿色，如果是4橙色）。在模板中我有：

  <p *ngFor="let item of data">
    {{item.name}}
  </p>

我怎么能做到这一点？

Answer 1

您可以使用class属性绑定

<p *ngFor="let item of data">
    <span [class.blue]="item.number === 1" [class.red]="item.number === 2" [class.green]="item.number === 3"> {{item.name}} </span> 
  </p>

或者，您可以使用[style.color]属性绑定

<p *ngFor="let item of data">
    <span [style.color]="getColor(item.number)">{{item.name}}</span>
</p>

getColor(number){
    if(number ===1 ){
        return 'blue';
        }else if(number ===2 ) 
         {
            return 'red';
         } else if(number ===3 ) 
           {
                return 'green';
           }else {
            return '';
            }


}

Answer 2

使用NgClass：

myComponent.html

<p [ngClass]="getColor(item.number)" *ngFor="let item of data">
   {{item.name}}
 </p>

myComponent.ts

 @component({
    ...
    templateUrl: './myComponent.html',
    styles: [`
        .red: { background-color: 'red'; }
        .green: { background-color: 'green'; }
        .blue: { background-color: 'blue'; }
        .orange: { background-color: 'orange'; }
    `]
)
export class MyComponent {

  getColor(n:number) {
     return {
        'red': n === 1,
        'green': n === 2,
        'blue': n === 3,
        'orange': n === 4
     }
 }

Answer 3

您可以使用NgClass。

在组件中，创建一个如下对象：

this.colorMap = {
  1: 'my-red',
  2: 'my-blue',
  3: 'my-green',
  4: 'my-orange'
};

在模板：

中

<p [ngClass]="colorMap[item.number]" *ngFor="let item of data">
  {{item.name}}
</p>

PLUNKER

Angular2中的条件样式文本

3 个答案: