typescript 由于ngModel,忽略Angular 检查函数

qrjkbowd  于 2023-02-05  发布在  TypeScript
关注(0)|答案(1)|浏览(115)

我是新来的天使。
我正在尝试创建一个复选框表,与另一个表进行比较,并将检查它是否存在。
这个函数工作得很好,但是当我添加ngModel时-为了保存更改,checked函数在第一次加载页面时被忽略了:

<tbody>
  <tr *ngFor="let w of workout;let i = index">
    <td>
      <div class="col-md-6">
        <input
          type="checkbox"
          name="workout_{{i}}"
          [checked]="checkIfExisted(w)"
          [value]="w"
          [(ngModel)]="program.workouts[i]">
      </div>
    </td>

    <td>
      <div class="col-md-6">{{w.workoutName}}</div>
    </td>
  </tr>

我的职务:

checkIfExisted(w:WORKOUT) {
    if(!this.program.workouts || this.program.workouts.length == 0) {
        console.log('no workouts found');
        return false;
    }

    this.arr = this.program.workouts.map(workout => workout.workoutId);

    if(this.arr.includes(w.workoutId)) {
        console.log('return true');
        return true;
    }

程序对象:

import { WORKOUT } from './workout.model';
export class PROGRAM {
  programId:number = 0;
  programName:string = '';
  programTarget:string = '';
  programNote:string = '';
  numOfExercises:number;
  workouts: WORKOUT[];
}

另一个问题是,当我保存时,在ngFrom中,它是这样保存的:
Web screen

{programName: "a", programTarget: "", programNote: "", numOfExercises: 1, workout_0: false, …}
numOfExercises:1
programName:"a"
programNote:""
programTarget:""
workout_0:false
workout_1:true

保存的不是整个对象:x1米1米1x,x1米2米1x

nhaq1z21

nhaq1z211#

这可能是因为您的业务逻辑文件无法在DOM呈现时加载。请尝试使用自调用函数加载适当的数据。

相关问题