Angular 2: Iterating over an array of objects and printing "Yes" to the view ONCE if any of the iterated objects return "true" for the check

Question

I have a situation in my Angular 2 app where I am iterating over an array of objects, and if the "completed" property is set to false for any of those objects, I want to print to the view 'Yes', because there is (at least) one object with "completed" equal to false -- meaning it's still an active flag.

However, right now, the template code I have is printing 'Yes' to the view for EACH time one of these objects with the "completed" property set to false returns true. How can I adjust this code so that I'm only getting "Yes" printed once if ANY ONE (or more) of the objects in the array being iterated over has that "completed" property set to true?

Here's my code:

<td *ngFor="let flag of service.flags">
     <ng-template *ngIf="flag?.completed === false"> 
        <span class="standard-flag">Yes</span>
     </ng-template> 
</td>

I also tried using the ternary operator, but it gives me the same result:

<td *ngFor="let flag of service.flags">
     <ng-template *ngIf="flag?.completed === false ? true : false""> 
        <span class="standard-flag">Yes</span>
     </ng-template> 
</td>

While I would normally handle the logic in the component, I'm thinking there must be a way, perhaps with indexing, that I could this in the view on this occasion.

I would do the iteration within the component.ts file and then set a variable (this.completed) to true when any of them returns true. Then, within the template, you can assign an attribute to show "yes": [hidden] = "completed" on a DOM element: <h1 [hidden] = "completed">Yes</h1>. — Reticulated Spline
– Reticulated Spline, Commented Jul 27, 2017 at 22:14
I agree, and normally I would do this in the component and print to the view the result. However in this particular case (for reasons I don't want to go into) I'd rather handle it in the view directly. I'm thinking there must be a way to do this with indexing of some sort. — Rey
– Rey, Commented Jul 27, 2017 at 22:15

Trash Can · Accepted Answer · 2017-07-27 22:17:45Z

0

You don't need an ngFor to make this work. ngFor repeats for every element in your array, that's why you see a bunch Yes's

Use Array.some() which returns true immediately if at least one of the elements in the array returns true, so it is the right tool for the job here

<td>
    <span *ngIf="service.flags.some(flag => flag.completed === false) === true">
        Yes
    </span>
</td>

answered Jul 27, 2017 at 22:17

Trash Can

6,8325 gold badges27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Rey Over a year ago

Sounds promising. Will give it a try. I didn't realize I could essentially iterate over all of the objects in the array without using *ngFor.

Rey Over a year ago

Getting an error: zone.js:522 Unhandled Promise rejection: Template parse errors: Parser Error: Bindings cannot contain assignments at column 42 in [service.flags.some(flag => flag.completed === false) === true]

Trash Can Over a year ago

Sounds strange, try refactoring this service.flags.some(flag => flag.completed === false) === true into a function and call the function inside ngIf instead

Rey Over a year ago

Yup, that would probably work. But in this case I'm trying to handle this logic in the view specifically.

Trash Can Over a year ago

Yeah, just do as you please, it is your code, but I think adding a function to your component class is much easier and less an overkill for what you are trying to achieve. Just an opinion

|

Collectives™ on Stack Overflow

Angular 2: Iterating over an array of objects and printing "Yes" to the view ONCE if any of the iterated objects return "true" for the check

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related