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

【问题标题】：How can I combine [checked] to precheck and ngModel to bind with the function at the same time?如何将 [checked] 与 precheck 和 ngModel 结合起来同时与函数绑定？
【发布时间】：2021-04-17 21:39:57
【问题描述】：

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

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

【问题讨论】：

你能更好地解释一下你的需求是什么
我想使用 ngModel 来预检查列表并使用该函数，但我找到了解决方法

标签： angular typescript checkbox checked ngmodel

【解决方案1】：

编辑：我找到了解决方法

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

【讨论】：