为什么此ngStyle会为所有项目添加背景色

时间:2019-02-26 16:55:02

标签: angular

如果项目等于或大于5,则应添加蓝色背景,所有其他项目(从1到4)应保持透明,但是一旦计数器达到5,它将使所有背景颜色变为蓝色。 https://stackblitz.com/edit/angular-8g4uzm

JSON.parse(JSON.stringify([null, null])) === [null, null]

<button (click)="toggle()">Display Details</button>
    <p *ngIf="show">Secret Password = Tura</p>
    <!-- <ul>
      <li>{{times}}</li>
    </ul> -->
    <p 
    [ngStyle]="{backgroundColor: bgColor() >=5 ? 'blue' : 'transparent'}"
    *ngFor="let logItem of log">{{logItem}}
    </p>

1 个答案:

答案 0 :(得分:3)

您正在检查不断增加的长度,因此当长度达到5时,每一行的条件都成立。将其替换为索引:

<p 
   [ngStyle]="{backgroundColor: i >=5 ? 'blue' : 'transparent'}"
   *ngFor="let logItem of log; let i = index">{{logItem}}
</p>

demo