Angular Ionic ngIf check if includes doesnt work with comparison with array from parent

Question

i have created a dialog where the user can select its interests. If the user clicks on one of the chips this method is beeing triggered:

 handleClick(tag){
let found = false;
let index = -1;
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < this.selectedTags.length; i++) {
  if (this.selectedTags[i].name_de === tag.name_de) {
    index = i;
    found = true;
    break;
  }
}
if (!found) {
  this.selectedTags.push(tag);
}else{
  this.selectedTags.splice(index, 1);
}

}

If the tag is added to SelectedTags, the chips should display a checkmark. This is working fine but if the user left the dialog and open the dialog again, the previous selection should be shown as well. To do so i'm sending the array to my dialog this way:

const dialogRef = this.dialog.open(SelectTagsDialogComponent, {
  width: '80%',
  data: {scope: 'tags',
        tags: this.selectedTags}
});

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed', result);
  if (result){
    this.selectedTags = result;
  }

});

In my dialog i'm checking it like this:

getData(){
let updateRef = this.afs.collection('tags');
if (this.data.scope === 'intolerances'){
updateRef = this.afs.collection('intolerations');
}else if (this.data.scope === 'preferences'){
  updateRef = this.afs.collection('preferences');
}
updateRef.valueChanges().subscribe(data => {
  this.tags = data;
  this.filteredTags = this.tags;
  if (this.data.tags){
    this.selectedTags = this.data.tags;
  }
});

}

the problem is that the marker isnt shown but there are some tags inside my array. To check if the tag is in selectedTags i created this ngIf:

 <ion-chip outline color="primary" *ngFor="let tag of filteredTags" (click)="handleClick(tag)">
      <ion-icon *ngIf="this.selectedTags.includes(tag)" name="checkmark-circle"></ion-icon>
      <ion-label>{{tag.name_de}}</ion-label>
  </ion-chip>

I actually dont know why its working with direct interaction and why its not working if the tags are previously selected. thanks

question from:https://stackoverflow.com/questions/65905870/angular-ionic-ngif-check-if-includes-doesnt-work-with-comparison-with-array-from

Answer 1

updateRef.valueChanges().subscribe(data => {
this.tags = data;
  this.filteredTags = this.tags;
  if (this.data.tags){
    this.selectedTags = this.data.tags;
  }
});

should be before

let updateRef = this.afs.collection('tags');
if (this.data.scope === 'intolerances'){
updateRef = this.afs.collection('intolerations');
}else if (this.data.scope === 'preferences'){
  updateRef = this.afs.collection('preferences');
}