如何检查Angular中另一个可观察元素是否存在？

Question

I have two list elements side by side.

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

I have a checkbox that when clicked will disable the checkbox so I can't click it again, and add a class to the parent list element. That element then shows on the "APPROVED" list.

All of this is working great as a user is actually using the application.

When the page loads, the list(s) are populated correctly, but I'm not sure how to apply the class/disable the checkbox to the elements in the "NEW" list.

When a user clicks the checkbox, I am simply setting a variable in my .ts file:

constructor() {
    isApproved: boolean = false;
    ...
}

...

// item has been clicked and status updated into db.
item.isApproved = true;

...
do other stuff

Here is what my html looks like:

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

In my constructor, I am not sure how to check what items are in the "APPROVED" list when the page loads and then apply a class to my "NEW" list. I know that Items in the "APPROVED" list are showing correctly, those are the items that need to have the class applied to them in the "NEW" column.

In really, really simple js it would be something like:

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

Thank you for any suggestions!

Answer 1

write the following code snippet in the constructor or ngOnInit method to set the isApproved field:

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