NgIf all objects in an array match a condition-CodePudding

So I have a structure like so:

{
    documentGroup: {
        Id: 000
        Children: [
            {
                Id: 000
                Status: 1
            },
            {
                Id: 000
                Status: 2
            },...
        ]
    },
},

Is there a way to write an ngIf statement to check if all Children elements have Status == 1?

EDIT: When I try this

documentGroup.children.every(({status}) => status === 1)

I get the error:

Parser Error: Missing expected ) at column 41 in [documentGroup.children.every(({status}) => status === 1)

CodePudding user response：

you could also make use of an angular pipe, to check the status and return something else instead (in your case, you could check the status and return true or false). Transforming Data Using Pipes

CodePudding user response：

You will need add a new function into your component's .ts file which would do the check for you and you can then reference it in the template as follows (documentsObj is the object that contains the object in your example):

.ts:

isAllStatusOne(): boolean {
    return this.documentsObj.documentGroup.Children.every(({Status}) => Status === 1);
}

.html:

*ngIf="isAllStatusOne()"

The above code should trigger change detection at the start and any time a property value changes in the documentsObj object which should then proceed to check if all Children have a Status property that is 1. If they all are 1 - every should return true and the nested elements/components should be rendered.

Alternatively you can use find which when using with Status !== 1 condition would return undefined when all Status properties are 1, hence coupled with ! at the start it will result in true:

isAllStatusOne(): boolean {
    return !this.documentsObj.documentGroup.Children.find(({Status}) => Status !== 1);
}