如何将 [checked] 与 precheck 和 ngModel 结合起来同时与函数绑定？

问题描述

所以我有两个 observable 来承诺数组，技巧是用 ngFor 填充复选框，另一个是如果能力对象在技能中，则在页面加载时检查复选框。我也有一个功能之后，取决于检查的技能将添加到数据库中。 [检查] 存在 [(ngModel)] 不起作用。我不知道如何将它们组合在一起，请帮忙。

competences.component.html

    <ion-card-content>
    <div id ="research">
        <ion-searchbar placeholder="Ex: Piano"  [(ngModel)]="search" type="text" maxlength="20"></ion-searchbar>
    </div>
    <ion-item *ngFor="let skill of skills | filter:search">
        <div>
            <ion-label>{{skill.title}}</ion-label>
            <ion-label>{{skill.type}}</ion-label>
        </div>
        <ion-checkBox slot="start" [checked]="isInArray(skill)" [(ngModel)]="skill.checked" (ionChange)="onChange(skill)" ></ion-checkBox>
    </ion-item>
</ion-card-content>

competences.component.ts

import {Component,OnInit} from '@angular/core';
import {SkillService} from '../../services/skill.service';
import {UserService} from '../../services/user.service';

@Component({
  selector: 'app-competences',templateUrl: './competences.component.html',styleUrls: ['./competences.component.scss'],})
export class CompetencesComponent implements OnInit {
  skills = [];
  search: string;
  competences = [];

  constructor(
      private skillService: SkillService,private userService: UserService) {
  }

  async ngOnInit() {
    this.competences = await this.getCompetences();
    this.skills = await this.getSkills();
  }
  isInArray(value) {
    return this.competences.findindex((val) => val.title === value.title) > -1;
  }
  getCompetences() {
    return this.skillService.getUserCompetence(localStorage.getItem('userMail')).toPromise();
  }
  getSkills() {
    return this.skillService.getSkills().toPromise();
  }

  onChange(skill) {
    if (skill.checked == true) {
      this.userService.addUserCompetence(localStorage.getItem('userMail'),skill.title).subscribe();
    } else if (skill.checked == false) {
      this.userService.deleteUserCompetence(localStorage.getItem('userMail'),skill.title).subscribe();
    }
  }
}

解决方法

编辑：我找到了解决方法

competences.component.html

<ion-card-content>
    <div id ="research">
        <ion-searchbar placeholder="Ex: Piano"  [(ngModel)]="search" type="text" maxlength="20"></ion-searchbar>
    </div>
    <ion-item *ngFor="let skill of skills | filter:search">
            <ion-label>{{skill.title}}</ion-label>
            <ion-label>{{skill.type}}</ion-label>
        <ion-checkbox slot="start" [checked]="isInArray(skill)" [value]="skill" (ionChange)="onCheck(skill)" ></ion-checkbox>
    </ion-item>

</ion-card-content>

competences.component.ts

import {Component,OnInit} from '@angular/core';
import {SkillService} from '../../services/skill.service';
import {UserService} from '../../services/user.service';

@Component({
  selector: 'app-competences',templateUrl: './competences.component.html',styleUrls: ['./competences.component.scss'],})
export class CompetencesComponent implements OnInit {
  skills = [];
  search: string;
  competences = [];
  checkedSkills = [];

  constructor(
      private skillService: SkillService,private userService: UserService) {
  }

  async ngOnInit() {
    this.competences = await this.getCompetences();
    this.skills = await this.getSkills();
    this.competences.forEach(skill => this.checkedSkills.push(skill));
    console.log(this.checkedSkills);
  }
  isInArray(skill) {
    return this.competences.findIndex((val) => val.title === skill.title) > -1;
  }
  getCompetences() {
    return this.skillService.getUserCompetence(localStorage.getItem('userMail')).toPromise();
  }
  getSkills() {
    return this.skillService.getSkills().toPromise();
  }

  onCheck(skill) {
    if (!this.isInArray(skill)) {
      this.checkedSkills.push(skill);
      this.userService.addUserCompetence(localStorage.getItem('userMail'),skill.title).subscribe();
    } else {
      const index = this.checkedSkills.findIndex((val) => val.title === skill.title);
      if (index > -1) {
        this.checkedSkills.splice(index,1);
        this.userService.deleteUserCompetence(localStorage.getItem('userMail'),skill.title).subscribe();
      }
    }
    console.log(this.checkedSkills);
  }
}