NgIf 数组中的所有对象都匹配一个条件

Question

所以我有这样的结构：

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

有没有办法写一个 ngIf 语句来检查所有子元素是否有 Status == 1？

编辑：当我尝试这个时

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

我收到错误：

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

Answer 1

您需要在组件的 .ts 文件中添加一个新函数来为您进行检查，然后您可以在模板中引用它，如下所示（documentsObj 是包含您示例中的对象):

.ts:

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

.html:

*ngIf="isAllStatusOne()"

上面的代码应该在开始时触发变化检测，并且任何时候 documentsObj 对象中的属性值发生变化，然后应该继续检查是否所有 Children 都有 Status 属性即 1。如果它们都是 1 - every 应该 return true 并且嵌套的 elements/components 应该被渲染。

或者，您可以使用 find，当与 Status !== 1 条件一起使用时，当所有 Status 属性均为 1 时，将 return undefined，因此与 ! 相结合一开始它会导致 true:

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

Answer 2

您还可以使用 angular 管道来检查状态和 return 其他东西（在您的情况下，您可以检查状态和 return true 或错误的）。 Transforming Data Using Pipes

NgIf 数组中的所有对象都匹配一个条件

NgIf all objects in an array match a condition

html

typescript

angular