Как проверить, есть ли значение в массиве и проверить его с помощью флажков

Question

У меня есть база данных firestore с коллекцией world с вложенной коллекцией languages

Я сделал две функции: одну для извлечения каждого документа из вложенной коллекции languages и однуфункция, где взять каждый язык, если значение userUid находится в массиве userUids

Вот краткий пример данных:

uid: string;
label: string; // The language label (e.g. French, English, Chinese, etc)
userUids: string[]; // This is where it has every uid from the users who speak the language

Теперь я пытаюсьустановить каждый флажок в режиме реального времени, основываясь на текущем userUid в массиве userUids, при этом все еще нужно показывать каждый флажок.

Что я ожидаю:

- [x] French  // This is checked because the current userUid is in the userUids array
- [x] English // Same as above
- [ ] Chinese // Not checked because it is not in the current userUid array
- [ ] Russian // Same as above
- [ ] Other   // Same as above

Что я получаю вместо:

Все проверено

- [x] French
- [x] English
- [x] Chinese
- [x] Russian
- [x] Other

Что я пробовал:

HTML:

<div class="language" *ngFor="let language of worldLanguages">
  <input
    type="checkbox"
    [attr.checked]="spokenLanguages ? language : false"
    [value]="language"
    (change)="toggleLanguage($event, language)"
>
  {{language.label}}
</div>

Компонент:

user: User; // Current user

// worldLanguages and spokenLanguages are basically an array of the data above
ngOnInit() {
  this.worldLanguages = this.worldService.getAllLanguages(this.user.worldUid); // Get every language
  this.spokenLanguages = this.worldService.getAllSpokenLanguages(this.user.worldUid, this.user.uid); // Get every spoken languages (where user.uid is in the userUids array)
}

// Language is based on the data above
toggleLanguage(event, language: Language) {
  if (event.target.checked) {
    this.worldProvider.addUserToLanguage(language.uid, this.user.worldUid, this.user.uid);
  } else {
    this.worldProvider.removeUserToLanguage(language.uid, this.user.worldUid, this.user.uid);
  }
}

Как я могу установить один флажок, основываясь на том, что userUid находится в массиве userUids?

Редактировать: Вот функции из службы

  getAllLanguages$(worldUid: string): Observable<Language[]> {
    return this.userProvider.user$.pipe(
      switchMap((user: User) => {
        if (!user) return of([]);

        return this.afs.doc(`worlds/${worldUid}`).collection('languages', ref => ref
          .where('userUid', '==', user.uid)
        )
        .valueChanges()
        .pipe(
          map((sLanguages: ServerLanguage[]) => sLanguages
            .map(sLanguage => new Language(sLanguage))
            .sort((a: Language, b: Language) => a.label > b.label ? 1 : -1)
          )
        );
      })
    );
  }

  getAllSpokenLanguages$(worldUid: string, entityUid: string): Observable<Language[]> {
    return this.userProvider.user$.pipe(
      switchMap((user: User) => {
        if (!user) return of([]);

        return this.afs.doc(`worlds/${worldUid}`).collection('languages', ref => ref
          .where('userUid', '==', user.uid)
          .where('entityUids', 'array-contains', entityUid)
        )
        .valueChanges()
        .pipe(
          map((sLanguages: ServerLanguage[]) => sLanguages
            .map(sLanguage => new Language(sLanguage))
            .sort((a: Language, b: Language) => a.label > b.label ? 1 : -1)
          )
        );
      })
    );
  }

Answer 1

Вы можете создать функцию, чтобы проверить, существует ли язык, и текущий пользователь говорит на этом языке

isLanguageSpoken(languageLabel){
   let spLang=this.spokenLanguages.find(s=> s.label == languageLabel);
   if(spLang){
      return spLang.userUids.includes(this.user.uid)
      }
   return false;
 }

, затем используйте эту функцию, чтобы установить атрибут

 <input type="checkbox" [checked]="isLanguageSpoken(language.label)"
    [value]="language" (change)="toggleLanguage($event, language)">

Демо

Answer 2

Попробуйте использовать вот так:

<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="orders" *ngFor="let order of form.controls.orders.controls; let i = index">
    <input type="checkbox" [formControlName]="i">
    {{ordersData[i].name}}
  </label>

  <button>submit</button>
</form>