Angular 5 FormArray 从数据库中获取数据并显示行 [英] Angular 5 FormArray get data from database and show rows

问题描述

我只是 angular 的新手.我创建了一个事件组件，用户在其中输入带有包的事件名称.当用户创建一个事件时，它具有通过添加和删除行创建多个包的功能.为此，我使用了 FormArray.

这里一切正常.但是，当我尝试在事件编辑组件中获取这些值时，我正在获取事件名称的值，但是当我尝试获取包详细信息时，我在显示带有填充值的行时有点困惑.

这是我到目前为止所做的代码

event-edit.component .ts 看起来像这样

import { Component, OnInit } from '@angular/core';import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';从'@angular/forms/src/directives/reactive_directives/form_control_name'导入{FormControlName}；从@angular/router"导入 { ActivatedRoute, Router };从'@angular/common/http' 导入 { HttpClient };从 '../event.service' 导入 { EventService };@成分({选择器:应用程序事件编辑"，templateUrl: './event-edit.component.html',styleUrls: ['./event-edit.component.css']})导出类 EventEditComponent 实现 OnInit {事件 = {};构造函数(私有 http: HttpClient,专用路由器:路由器，私人路线:ActivatedRoute，私有 formBuilder :FormBuilder，私人事件服务:事件服务，) { this.createEventForm();}createEventForm() {this.form = this.formBuilder.group({事件名称: ['', Validators.compose([Validators.required,Validators.minLength(5)])],})}ngOnInit() {this.getOneEvent(this.route.snapshot.params['id']);this.form = new FormGroup({eventname: new FormControl('', [ Validators.required, Validators.minLength(5)]),部分:新 FormArray([this.initSection(),]),});}getOneEvent(id) {this.http.get(this.domain + '/api/event/' + id).subscribe(data => {this.event = data['eventname'];this.packages = data['packages'];//获取包作为数组对象});}公共 addPackageRow() {const control = <FormArray>this.form.get('sections');control.push(this.initSection());}addSection() {const control = <FormArray>this.form.get('sections');control.push(this.initSection());}initSection() {返回新的表单组({包名:new FormControl('', [ Validators.required, Validators.minLength(5)]),包装价格:新的 FormControl(''),packagelimit: new FormControl('')});}getSections(形式){返回 form.controls.sections.controls;}公共删除部分(i){const control = <FormArray>this.form.get('sections');control.removeAt(i);}}

event-edit.component.html 看起来像这样

<h1 class="page-header">事件编辑</h1><!-- <div class="row show-hide-message"><div [ngClass]= "messageClass">{{message}}</div>
--><form [formGroup] = "form" (ngSubmit)="updateEvent(event._id)"><字段集><div class="form-group"><label for="eventname">事件名称</label>
<input type="text" formControlName="eventname" class="form-control" autocomplete="off" [(ngModel)]="eventname" placeholder="Event Name" >

<h4>套餐价格</h4><小时><div class="row" formArrayName="sections"><div class="col-md-12" *ngFor="let section of getSections(form); let i = index" [formGroupName]="i"><div class="form-group col-md-5"><label for="packagename">包名称</label><input type="text" class="form-control" autocomplete="off" placeholder="Package Name" formControlName="packagename">

<div class="form-group col-md-2"><label for="packageprice">包裹价格</label><input type="number" class="form-control" autocomplete="off" placeholder="Package Price" formControlName="packageprice" >

<div class="form-group col-md-3"><label for="packagelimit">最大购买限额</label><input type="number" class="form-control" formControlName="packagelimit" autocomplete="off" >

<div class="form-group col-md-1"><br/><input type="button" (click)="addPackageRow()" class="btn btn-md btn-success" value="+" name="">