Блог

я создал диалоговое окно, в котором пользователь может выбрать свои интересы. Если пользователь нажимает на один из чипов, этот метод запускается:

  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);
}
 

}

Если тег добавлен в selectedTags, на чипах должна отображаться галочка. Это работает нормально, но если пользователь покинул диалоговое окно и снова открыл диалоговое окно, также должен быть показан предыдущий выбор. Для этого я отправляю массив в свой диалог таким образом:

 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 = resu<
  }

});
 

В моем диалоговом окне я проверяю это следующим образом:

 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;
  }
});
 

}

проблема в том, что маркер не отображается, но внутри моего массива есть несколько тегов. Чтобы проверить, находится ли тег в selectedTags, я создал этот 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>
 

Я на самом деле не знаю, почему он работает с прямым взаимодействием и почему он не работает, если теги выбраны ранее.
Спасибо

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

должно быть до

 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');
}
 

я понял, что не могу использовать includes, потому что он не ссылается на один и тот же объект. Поэтому я изменил способ проверки на это:

 private compareWithCheckedOptions() {
this.filteredTags.forEach(tag => {
  if (this.selectedTags.some((item) => item.name_de === tag.name_de)) {
    tag.checked = true;
  }
});
 

}

Этот метод будет вызываться при каждой загрузке

В моем html я проверяю следующее:

    <ion-icon *ngIf="tag.checked" name="checkmark-circle"></ion-icon>