javascript - 根据子状态 Angular 更改父状态/类别

Question

如果所有 child 的状态均为“失败”，我想更改父级的类别，我正在使用 Angular 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”，否则父级 LI 中的“ngClass”为“PASS”。

有没有办法可以用 Angular 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