如何检查一个值是否在数组中并使用复选框进行检查

Question

我有一个带有 world 集合的 firestore 数据库和一个子集合 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)">

Demo

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>