如何通过复选框 post 对象数组

Question

我正在尝试初始化一个对象类型属性复选框数组，但它不起作用。（抱歉我的英语不好）

型号

活动

import {TypeActif} from './model.type-actif';
import {CritereActif} from './model.critere-actif';

export class Actif{
  ref: string;
  nom: string = '';
  type_actif: TypeActif = new TypeActif();
  lesCriteresActifs: Array<CritereActif> = new Array<CritereActif>();
}

CritereActif

import {Actif} from './model.actif';
import {LesCriteres} from './model.les-criteres';
import {LesValeurs} from './model.les-valeurs';

export class CritereActif{
  id: number;
  actif: Actif = new Actif();
  critere: LesCriteres = new LesCriteres();
  valeur: LesValeurs = new LesValeurs();
}

LesCriteres

export class LesCriteres{
  code: string = null;
  nom: string = '';
}

actif.component.html

<div class="form-group">
    <label>Critères : </label>&nbsp;
    <div class="checkbox-inline" *ngFor="let l of lesCriteres; let i= index">
      <label>
        <input type="checkbox" [value]="l.code" [(ngModel)]="actif.lesCriteresActifs[i].critere.code">{{l.code}}
      </label>
    </div>
</div>

我想在 table "lesCritesActifs" 中添加用户将检查的 "lesCriteres" 的每个元素。

在我添加行之前一切正常：

[(ngModel)]="actif.lesCriteresActifs[i].critere.code"

我在 Web 开发控制台中遇到此错误：

ERROR TypeError: "_co.actif.lesCriteresActifs[_v.context.index] is undefined"

谢谢！

Answer 1

问题是您的 lesCriteresActifs 是空的，您正试图访问 .lesCriteresActifs[_v.context.index] 中的一个索引，这就是未定义的原因，您无法访问 .critere.code

部分解决方案可能是

[(ngModel)]="actif.lesCriteresActifs[i]?.critere.code"

Answer 2

我看到您有一个必须初始化的 CritereActif 数组。如果您知道大小，则可以使用类似 for 的循环：

for (let i = 0; i<lesCriteresActifs.length; i++){
    let aCritereActif = new CritereActif();
    lesCriteresActifs.push(aCritereActif);  
}

之后，您可以在编写程序时访问数组的每个成员[(ngModel)]="actif.lesCriteresActifs[i].critere.code"。

如何通过复选框 post 对象数组

How to post an array of objects by a checkbox

angular

spring

typescript

checkbox

ngfor