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

Posted 2023-03-13

【中文标题】如何检查一个值是不是在数组中并使用复选框进行检查

【英文标题】：How to check if a value is in an array and check it with check boxes如何检查一个值是否在数组中并使用复选框进行检查

【发布时间】：2020-01-26 14:28:59

【问题描述】：

我有一个带有 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)
          )
        );
      )
    );
  

【问题讨论】：

可以分享到stackbiltz吗？

添加getAllSpokenLanguages() 逻辑

使用[checked]代替[attr.checked]

@Dino 我已经从服务中添加了这两个功能

***.com/questions/54984196/…

【参考方案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

【讨论】：

jitender，你的 stackblitz 与答案不符

【参考方案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>