索引不会在 ngFor Angular 2+ 中加载
Index does not load in ngFor Angular 2+
上下文
我在 Angular 6 中的 formGroup 中有一个 formArray 和一些与数组元素交互的函数, 像这样 (component.ts):
form: FormGroup
constructor(private builder: FormBuilder) { }
ngOnInit() {
this.form = this.builder.group({
ingreso: '',
salida: '',
habitaciones: this.builder.array([])
})
}
get habitacionForms() {
return this.form.get('habitaciones') as FormArray;
}
addHabitacion() {
var habitacion = this.builder.group({
tipo: '',
piso: '',
numero: '',
})
this.habitacionForms.push(habitacion);
}
deleteHabitacion(habIndex) {
this.habitacionForms.removeAt(habIndex)
}
视图 (component.html) 是:
<!-- Form starts here -->
<form class="form-horizontal" [formGroup]="form" (ngSubmit)="submitHabitacion()">
<div class="box-body">
<div class="form-group">
<label for="ingreso" class="col-sm-2 control-label">Fecha de ingreso</label>
<div class="col-sm-8">
<input type="date" class="form-control" formControlName="ingreso" id="ingreso" placeholder="">
</div>
</div>
<div class="form-group">
<label for="salida" class="col-sm-2 control-label">Fecha de salida</label>
<div class="col-sm-8">
<input type="date" class="form-control" formControlName="salida" id="salida" placeholder="">
</div>
</div>
<!-- Habitaciones -->
<div class="col-md-9 col-md-offset-1">
<div class="box box-primary" *ngFor="let habitacion of habitacionForms.controls; let i = index"
[formGroupName]="i">
{{i}}
<div class="box-header with-border">
<h3 class="box-title">Habitación #{{i + 1}}</h3>
<button type="button" class="btn btn-danger" style="margin: 2px; margin-left: 6%"
(click)="deleteHabitacion(habIndex)">Eliminar</button>
</div>
<div class="box-body">
<div class="form-group">
<label for="tipo" class="col-sm-2 control-label">Tipo</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="tipo" id="tipo" placeholder="">
</div>
</div>
<div class="form-group">
<label for="piso" class="col-sm-2 control-label">Piso</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="piso" id="piso" placeholder="">
</div>
</div>
<div class="form-group">
<label for="numero" class="col-sm-2 control-label">Número</label>
<div class="col-sm-8">
<input type="numero" class="form-control" formControlName="numero" id="numero" placeholder="">
</div>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-success col-md-6 col-md-offset-3">Agregar cliente</button>
</div>
</div>
</div>
<button type="button" class="btn btn-warning col-md-7 col-md-offset-2"
(click)="addHabitacion()">Agregar habitación</button>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary col-md-9 col-md-offset-1">Agregar nueva reserva</button>
</div>
</form>
问题
当我 运行 程序按下 "Agregar Habitacion" 按钮时,它应该在 formArray 上创建一个新元素,它添加正确的将元素添加到"habitacion"formArray,但是跳转这个错误:
“错误:找不到具有未指定名称属性的控件
在 _throwError (forms.js:1799)
在 setUpFormContainer (forms.js:1781)..."
错误跳转到*ngFor指令行对应的第28行。
似乎索引没有加载,因为显示索引的标签不会检索它,直到我将值放入生成的 formArray 实例的输入中,并且神奇地找到了索引并且显示。
我解决了!我忘了在我迭代 formArray。这就是为什么它无法识别 formArray 并且不知何故未加载 *ngFor 的索引。我的错,但也许这对某人有帮助。
上下文
我在 Angular 6 中的 formGroup 中有一个 formArray 和一些与数组元素交互的函数, 像这样 (component.ts):
form: FormGroup
constructor(private builder: FormBuilder) { }
ngOnInit() {
this.form = this.builder.group({
ingreso: '',
salida: '',
habitaciones: this.builder.array([])
})
}
get habitacionForms() {
return this.form.get('habitaciones') as FormArray;
}
addHabitacion() {
var habitacion = this.builder.group({
tipo: '',
piso: '',
numero: '',
})
this.habitacionForms.push(habitacion);
}
deleteHabitacion(habIndex) {
this.habitacionForms.removeAt(habIndex)
}
视图 (component.html) 是:
<!-- Form starts here -->
<form class="form-horizontal" [formGroup]="form" (ngSubmit)="submitHabitacion()">
<div class="box-body">
<div class="form-group">
<label for="ingreso" class="col-sm-2 control-label">Fecha de ingreso</label>
<div class="col-sm-8">
<input type="date" class="form-control" formControlName="ingreso" id="ingreso" placeholder="">
</div>
</div>
<div class="form-group">
<label for="salida" class="col-sm-2 control-label">Fecha de salida</label>
<div class="col-sm-8">
<input type="date" class="form-control" formControlName="salida" id="salida" placeholder="">
</div>
</div>
<!-- Habitaciones -->
<div class="col-md-9 col-md-offset-1">
<div class="box box-primary" *ngFor="let habitacion of habitacionForms.controls; let i = index"
[formGroupName]="i">
{{i}}
<div class="box-header with-border">
<h3 class="box-title">Habitación #{{i + 1}}</h3>
<button type="button" class="btn btn-danger" style="margin: 2px; margin-left: 6%"
(click)="deleteHabitacion(habIndex)">Eliminar</button>
</div>
<div class="box-body">
<div class="form-group">
<label for="tipo" class="col-sm-2 control-label">Tipo</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="tipo" id="tipo" placeholder="">
</div>
</div>
<div class="form-group">
<label for="piso" class="col-sm-2 control-label">Piso</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="piso" id="piso" placeholder="">
</div>
</div>
<div class="form-group">
<label for="numero" class="col-sm-2 control-label">Número</label>
<div class="col-sm-8">
<input type="numero" class="form-control" formControlName="numero" id="numero" placeholder="">
</div>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-success col-md-6 col-md-offset-3">Agregar cliente</button>
</div>
</div>
</div>
<button type="button" class="btn btn-warning col-md-7 col-md-offset-2"
(click)="addHabitacion()">Agregar habitación</button>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary col-md-9 col-md-offset-1">Agregar nueva reserva</button>
</div>
</form>
问题
当我 运行 程序按下 "Agregar Habitacion" 按钮时,它应该在 formArray 上创建一个新元素,它添加正确的将元素添加到"habitacion"formArray,但是跳转这个错误:
“错误:找不到具有未指定名称属性的控件 在 _throwError (forms.js:1799) 在 setUpFormContainer (forms.js:1781)..."
错误跳转到*ngFor指令行对应的第28行。 似乎索引没有加载,因为显示索引的标签不会检索它,直到我将值放入生成的 formArray 实例的输入中,并且神奇地找到了索引并且显示。
我解决了!我忘了在我迭代 formArray。这就是为什么它无法识别 formArray 并且不知何故未加载 *ngFor 的索引。我的错,但也许这对某人有帮助。