user2924127 user2924127 - 6 months ago 12
Javascript Question

Hide item that is part of a loop based on a condition

<ul *ngFor="#item of items; #i=index" >
<li [hidden]="{{ item.myattr === 'some_value' }}"> {{ item.val}} </li>

</ul>


I have the following code shown above. I want hide the list if the item has a value equal some value. In this case I have the items, they have an attribute called
myattr
, and if it is equal to
some_value
then the item should be hidden. The code I provided though does not work.

Answer

You don't need to use interpolation {{}} with property binding [] (actually, you can't):

<li [hidden]="item.myattr === 'some_value'">

Also, read Mistake #1: Binding to the native "hidden" property in http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

So a better solution is likely

<li *ngIf="item.myattr !== 'some_value'">