Question

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

模型

Actif

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>

我想在表“ lesCritesActifs”中添加用户将检查的“ lesCriteres”的每个元素。

在添加该行之前，一切正常：

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

我在Web开发控制台中出现此错误：

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

谢谢！

Answer 1

问题在于您的<section id="inscripciones-section"> <div class="container-fluid"> <div class="row contacto"> <div class="header-section small-header bg-left rosa"> <div style="max-width: calc(34em + 5vw);"> <h1>DATOS PERSONALES</h1> </div> </div> <div class="mx-auto"> <form id="form-inscripciones"> <div class="form-group-row align-items-center"> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Nombre</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Nombre</div> </div> <input type="text" class="form-control form-control-lg" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Apellidos</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Apellidos</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">NIF</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">NIF</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Fecha de nacimiento</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Fecha de nacimiento</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Domicilio</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Domicilio</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">CP</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">CP</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Localidad</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Localidad</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Provincia</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Provincia</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Teléfono solicitante</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Teléfono solicitante</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">E-mail</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">E-mail</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Curso que estudia</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Curso que estudia</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Facultad o escuela</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Facultad o escuela</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Titulación</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Titulación</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Nota media</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">Nota media</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup"> </div> </div> </div> </form> </div> <div class="header-section small-header bg-left rosa"> <div style="max-width: calc(34em + 5vw);"> <h1>DATOS <br> PADRE Y MADRE</h1> </div> </div> <div class="header-section small-header bg-left rosa"> <div style="max-width: calc(34em + 5vw);"> <h1>DATOS BANCARIOS</h1> </div> </div> </div> </section>为空，并且您试图访问lesCriteresActifs中的一个索引，这就是为什么未定义并且您不能访问.lesCriteresActifs[_v.context.index]

部分解决方案可能是

.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"时访问数组的每个成员。

如何通过复选框发布对象数组

2 个答案: