我有一个复杂的嵌套数组，并且数据在带有嵌套数组的对象中。我想在编辑视图中显示所有数据。我在stackblitz中尝试过，在加载数据时遇到问题。链接为enter link description here
我想在表单文本框中加载第二级数组（组）。 预先感谢。
答案 0 :(得分：2)
您将不得不创建getters，并且在某些情况下，需要创建返回FormArray的方法。
方法如下：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
data: any[];
form: FormGroup;
get tasks() {
return ( < FormArray > this.form.get('tasks')).controls;
}
getGroupsFor(index) {
return ( < FormArray > ( < FormArray > this.form.get('tasks')).controls[index].get('groups')).controls;
}
getDictionaryFor(index) {
return ( < FormArray > ( < FormArray > this.form.get('tasks')).controls[index].get('dictionary')).controls;
}
getAttributesFor(taskIndex, groupIndex) {
return ( < FormArray > ( < FormArray > ( < FormArray > this.form.get('tasks')).controls[taskIndex].get('groups')).controls[groupIndex].get('attributes')).controls;
}
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.loadData();
this.form = this.fb.group({
lessoncode: 'TMM',
countrycode: 'CA',
languagecode: 'en',
tasks: this.fb.array(this.getTasks())
});
console.log('Form Value', this.form.value);
}
getTasks() {
return this.data.map(task => this.fb.group({
taskid: task.taskid,
taskname: task.taskname,
groups: this.fb.array(this.getGroups(task.groups)),
dictionary: this.fb.array(this.getDictionaries(task.dictionary))
}));
}
getDictionaries(dictionaries: any[]) {
return dictionaries.map(dictionary => this.fb.group({
content_id: dictionary.content_id,
term: dictionary.term,
translation_id: dictionary.translation_id,
value: dictionary.value,
task_id: dictionary.task_id,
task_dictionary_id: dictionary.task_dictionary_id,
isnew: dictionary.isnew,
altered: dictionary.altered
}));
}
getGroups(groups: any[]) {
return groups.map(group => this.fb.group({
id: group.id,
name: group.name,
attributes: this.fb.array(this.getAttributes(group.attributes))
}));
}
getAttributes(attributes: any[]) {
return attributes.map(attribute => this.fb.group({
name: attribute.name,
contentid: attribute.contentid,
value: attribute.value,
translationvalue: attribute.translationvalue,
placeholder: attribute.placeholder,
label: attribute.label,
defaultvalue: attribute.defaultvalue,
type: attribute.type,
element: attribute.element,
altered: attribute.altered,
translation_id: attribute.translation_id,
isnew: attribute.isnew
}));
}
loadData() {
this.data = [{
"taskid": 31,
"taskname": "intro",
"groups": [{
"id": 223,
"name": "Fullscreen Image and Sub-Heading",
"attributes": [{
"name": "Main Heading",
"contentid": 767,
"value": "Multitasking",
"translationvalue": "Realización de varias tareas al mismo tiempo",
"placeholder": "Main Heading",
"label": "Main Heading",
"defaultvalue": "",
"type": "text",
"element": "input",
"altered": false,
"translation_id": 3063,
"isnew": false
},
{
"name": "Sub-Heading",
"contentid": 155,
"value": "Driver Attitude",
"translationvalue": "Actitud del conductor",
"placeholder": "Type Heading",
"label": "Sub-Heading",
"defaultvalue": "",
"type": "text",
"element": "input",
"altered": false,
"translation_id": 3064,
"isnew": false
},
{
"name": "Full-Screen Image",
"contentid": 211,
"value": "/media/lessons/dst/intro/image01-right.jpg",
"translationvalue": null,
"placeholder": "Image Url",
"label": "Full-Screen Image",
"defaultvalue": "",
"type": "image",
"element": "input",
"altered": false,
"translation_id": null,
"isnew": true
},
{
"name": "Full-Screen Image",
"contentid": 212,
"value": "/media/lessons/dst/intro/image01-left.jpg",
"translationvalue": null,
"placeholder": "Image Url",
"label": "Full-Screen Image",
"defaultvalue": "",
"type": "image",
"element": "input",
"altered": false,
"translation_id": null,
"isnew": true
},
{
"name": "Full-Screen Image",
"contentid": 213,
"value": "/media/lessons/dst/intro/image01-right.jpg",
"translationvalue": null,
"placeholder": "Image Url",
"label": "Full-Screen Image",
"defaultvalue": "",
"type": "image",
"element": "input",
"altered": false,
"translation_id": null,
"isnew": true
},
{
"name": "Full-Screen Image Alt",
"contentid": 880,
"value": "Multitasking - Driver Attitude",
"translationvalue": "Multitasking - Driver Attitude",
"placeholder": "Full-Screen Image Alt",
"label": "Full-Screen Image Alt",
"defaultvalue": "",
"type": "alt",
"element": "input",
"altered": false,
"translation_id": 3062,
"isnew": false
},
{
"name": "Icon SVG Data",
"contentid": 3063,
"value": "",
"translationvalue": null,
"placeholder": "SVG Data",
"label": "Icon SVG Data",
"defaultvalue": "",
"type": "html",
"element": "textarea",
"altered": false,
"translation_id": null,
"isnew": true
}
]
}],
"dictionary": [{
"content_id": 5,
"term": "Continue",
"translation_id": 3065,
"value": "Continuar",
"task_id": 31,
"task_dictionary_id": 11,
"isnew": 0,
"altered": 0
}]
},
{
"taskid": 32,
"taskname": "question-1",
"groups": [{
"id": 228,
"name": "Question",
"attributes": [{
"name": "Question Text",
"contentid": 956,
"value": "Welcome to the Multitasking exercise. Before we begin, please select the statement that best describes your current view on the subject.",
"translationvalue": "Bienvenido al ejercicio sobre realización de varias tareas al mismo tiempo. Antes de comenzar, seleccione la afirmación que mejor describa su opinión actual sobre el tema.",
"placeholder": "Question Text",
"label": "Question Text",
"defaultvalue": "",
"type": "textarea",
"element": "textarea",
"altered": false,
"translation_id": 3462,
"isnew": false
},
{
"name": "Randomize Answers",
"contentid": 1100,
"value": "1",
"translationvalue": null,
"placeholder": "Randomize Answers",
"label": "Randomize Answers",
"defaultvalue": "2",
"type": "truefalse",
"element": "select",
"altered": false,
"translation_id": null,
"isnew": true
}
]
}],
"dictionary": []
}
];
}
}
这将是您的模板：
<form [formGroup]="form">
<input type="text" formControlName="lessoncode" />
<input type="text" formControlName="countrycode" />
<input type="text" formControlName="languagecode" />
<div formArrayName="tasks">
<div *ngFor="let task of tasks;let taskIndex=index;">
<h1>Tasks</h1>
<div [formGroupName]="taskIndex">
<input formControlName="taskid" />
<input formControlName="taskname" />
<div formArrayName="groups">
<div *ngFor="let group of getGroupsFor(taskIndex);let groupIndex=index;">
<h2>Group</h2>
<div [formGroupName]="groupIndex">
<input formControlName="id" />
<input formControlName="name" />
<div formArrayName="attributes">
<div *ngFor="let attribute of getAttributesFor(taskIndex, groupIndex);let attributeIndex=index;">
<h3>Attribute</h3>
<div [formGroupName]="attributeIndex">
<input formControlName="name" />
<input formControlName="contentid" />
<input formControlName="value" />
<input formControlName="translationvalue" />
<input formControlName="placeholder" />
<input formControlName="label" />
<input formControlName="defaultvalue" />
<input formControlName="type" />
<input formControlName="element" />
<input formControlName="altered" />
<input formControlName="translation_id" />
<input formControlName="isnew" />
</div>
</div>
</div>
</div>
</div>
</div>
<div formArrayName="dictionary">
<div *ngFor="let dict of getDictionaryFor(taskIndex); let dictIndex=index;">
<h2>Dictionary</h2>
<div [formGroupName]="dictIndex">
<input formControlName="content_id" />
<input formControlName="term" />
<input formControlName="translation_id" />
<input formControlName="value" />
<input formControlName="task_id" />
<input formControlName="task_dictionary_id" />
<input formControlName="isnew" />
<input formControlName="altered" />
</div>
</div>
</div>
</div>
</div>
</div>
</form>
我花了大约一个小时为您创建了这个。但这很有趣。 Here's a StackBlitz for your referece 。
希望有帮助。