Изменение родительского статуса / класса на основе углового статуса ребенка

Question

Я хочу изменить класс родителя, если все дочерние элементы имеют статус «сбой», я использую угловой 5.

МОЙ JSON:

[{"parent":"PARENT 1", "child":[{ "name":"Child 1", "status":"fail" }, { "name":"Child 1", "status":"fail" },{ "name":"Child 1", "status":"fail" }, { "name":"Child 1", "status":"fail" }], "someVal":"SOME VALUE" }, { "parent":"PARENT 2", "child":[{ "name":"Child 1", "status":"pass" }, { "name":"Child 1", "status":"pass" },{ "name":"Child 1", "status":"fail" }, { "name":"Child 1", "status":"fail" }], "someVal":"SOME VALUE" }, { "parent":"PARENT 3", "child":[{ "name":"Child 1", "status":"pass" }, { "name":"Child 1", "status":"pass" },{ "name":"Child 1", "status":"pass" }, { "name":"Child 1", "status":"pass" }], "someVal":"SOME VALUE" }]

мой HTML:

<ul>
<li *ngFor="let anyvar of mainJSONOBJ" [ngClass]="FAIL/PASS"><a href="">{{anyvar.parent}}</a> 
    <ul *ngFor="let anyvar1 of anyvar.child" >
        <li *ngIf="anyvar1.child"><a href="#">{{anyvar.child.name}}</a></li>
    </ul>
</li>

То, что я пытаюсь сделать, это изменить «ngClass» на «FAIL», если все дочерние элементы имеют «status» как «fail», иначе «ngClass» на «PASS»в родительском LI.

Есть ли способ, которым я могу сделать это с угловым 5. Спасибо.

Answer 1

[ngClass]="isFailed(anyvar) ? 'fail' : 'pass'"

isFailed(value: { child: [{ status: string }] }): boolean {
    return value.child.every(c => c.status === 'fail');
}

https://stackblitz.com/edit/angular-lkuthv