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

Question

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

能力.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>

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

标签： angulartypescriptcheckboxcheckedngmodel

Answer 1

编辑：我找到了解决方法

能力.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>

能力.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);
  }
}