如何检查一个可观察量的元素是否存在于Angular中的另一个可观察量中?

Question

我有两个并排的列表元素。

NEW      |     APPROVED
-------------------------
ONE   [X]      ONE
TWO   [ ]      THREE
THREE [X]

我有一个复选框，单击该复选框时将禁用该复选框，因此我无法再次单击它，并将一个类添加到父列表元素。然后，该元素将显示在"已批准"列表中。

所有这些都在用户实际使用该应用程序时运行良好。

当页面加载时，列表已正确填充，但我不确定如何将类/禁用复选框应用于"NEW"列表中的元素。

当用户单击该复选框时，我只是在我的.ts文件中设置一个变量：

constructor() {
isApproved: boolean = false;
...
}
...
// item has been clicked and status updated into db.
item.isApproved = true;
...
do other stuff

这是我的 html 的样子：

<ion-item *ngFor="let item of items" [ngClass]="{approved: item.isApproved}">
...
</ion-item>

在我的构造函数中，我不确定如何在页面加载时检查"已批准"列表中的项目，然后将类应用于我的"NEW"列表。我知道"已批准"列表中的项目显示正确，这些是需要在"新建"列中应用类的项目。

在非常非常简单的js中，它将是这样的：

foreach(item In New list as item) {
if (item is in approved list) {
item.isApproved = true;
}
}

感谢您的任何建议！

Answer 1

在构造函数或 ngOnInit 方法中编写以下代码片段来设置 isApproved 字段：

NewList.forEach(item=>{
approvedList.forEach(approvedItem=>{
if(item.text===approvedItem.text){
item.isApproved = true;
}
});
});
}