Question

*ngFor element <li></li>正在重复，这很好。 todo.color属性也已通过。

问题：

如何设置li>style属性以在最后添加todo.color替换绿色，以便每次来自style="border-left: 3px solid " + todo.color之类的对象时显示不同的颜色。尝试了不同的方法，但 没有成功 。

 <ul>                           
    <li *ngFor="let todo of _todos" style="border-left: 3px solid green">
        <div>
            <span>{{todo.title}} {{todo.color}}</span>
        </div>
    </li>
</ul>

Answer 1

使用[ngStyle]指令查看详细信息，请查看此link

import {Component} from '@angular/core';
import {NgStyle} from '@angular/common';
@Component({
 selector: 'ngStyle-example',
 template: `
   <h1 [ngStyle]="{'font-style': style, 'font-size': size, 'font-weight': weight}">
     Change style of this text!
   </h1>
   <hr>
   <label>Italic: <input type="checkbox" (change)="changeStyle($event)"></label>
   <label>Bold: <input type="checkbox" (change)="changeWeight($event)"></label>
   <label>Size: <input type="text" [value]="size" (change)="size = $event.target.value"></label>
 `,
 directives: [NgStyle]
})
export class NgStyleExample {
   style = 'normal';
   weight = 'normal';
   size = '20px';
   changeStyle($event: any) {
     this.style = $event.target.checked ? 'italic' : 'normal';
   }
   changeWeight($event: any) {
     this.weight = $event.target.checked ? 'bold' : 'normal';
   }
}

Answer 2

试试这个：

 <ul>                           
    <li *ngFor="let todo of _todos" style="border-left: 3px solid green" [style.color]="todo.color">
        <div>
            <span>{{todo.title}} {{todo.color}}</span>
        </div>
    </li>
</ul>

angular2 * ng在ul＆gt; li上设置样式并传递颜色值

2 个答案: