javascript - ngStyle applying to all elements in ngFor - Stack Overflow

admin管理员组

文章数量:1336104

I am attempting to configure this Angular/Html/JS so that the elements begin to have a blue background when counter >= 5

<p
  *ngFor="let log of clickLog"
  [ngStyle]="{backgroundColor: counter >= 5 ? 'blue' : 'transparent'}">
  {{ log }}
</p>

when the counter is <= 4, all elements have no styling, as intended. The problem is: once the counter hits 5, ALL elements take on the blue background. My intention is that only elements 5+ have the background.

Edit: I am aware that I can use an index value from the ngFor-loop as an alternative solution. I am specifically curious why this approach does not work.

I am attempting to configure this Angular/Html/JS so that the elements begin to have a blue background when counter >= 5

<p
  *ngFor="let log of clickLog"
  [ngStyle]="{backgroundColor: counter >= 5 ? 'blue' : 'transparent'}">
  {{ log }}
</p>

when the counter is <= 4, all elements have no styling, as intended. The problem is: once the counter hits 5, ALL elements take on the blue background. My intention is that only elements 5+ have the background.

Edit: I am aware that I can use an index value from the ngFor-loop as an alternative solution. I am specifically curious why this approach does not work.

• javascript
• html
• angular
• ngfor
• ng-style

Share Improve this question Follow edited Jul 19, 2021 at 2:05 King-Wizard 15.7k66 gold badges8686 silver badges7676 bronze badges asked Aug 4, 2019 at 2:33 Chris PhillipsChris Phillips 2,13422 gold badges2222 silver badges4343 bronze badges 3

• See if it works for you: stackblitz./edit/angular-issue-repro2-kjjdkn – developer033 Commented Aug 4, 2019 at 3:03
• 2 this.counter is not part of your this.clicklog, which you're looping. So this.counter is true for all the items in this.clicklog getting applied that style. – Chaitanya Commented Aug 4, 2019 at 3:03
• Thank you @chaitanya. This is what I was looking for. While I had found alternative methods, like using an index as suggested in one of the answers below, my goal was to run the condition based on a value in my typescript file. – Chris Phillips Commented Aug 4, 2019 at 3:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The binding of counter inside [ngStyle] is called property binding which mean Angular will observe and evaluate all [ngStyle] in your <p> tag again and again whenever it dectects changes from counter value.(your misunderstanding is that counter value is evaluated and scoped in each loop)

That why when counter bee higher than 5, all [ngStyle] is evaluated again and have the style backgroundColor:blue. Therefore currently there is no way to archive what you want with only one property counter from your TS file.

I would suggest using *ngFor 's index which it's value is evaluated and scoped in each loop:

<p
  *ngFor="let log of clickLog; let indexOfElement = index;"
  [ngStyle]="{'background-color': (indexOfElement >= 4) ? 'blue' : ''}">
  {{ log }}
</p>

Maybe this?

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

Alternatively you could do it with CSS if it was always 5 with nth-child(n+5)

Once give a try. I didn't tried, but I think it'll work.

<p *ngFor="let log of clickLog; let i=index;" 
  [ngStyle]="{backgroundColor: (counter >=5 && i>=4) ?  'blue':'transparent'}">
  {{ log }}
</p>

本文标签： javascriptngStyle applying to all elements in ngForStack Overflow