Json 如何在angular2中以数组形式显示嵌套数组数据？

我在angular2项目中实现了

FormGroup

来呈现表单，并使用

formArray

来获取嵌套数组数据

form.component.html

<div class="col-md-12" formArrayName="social_profiles">
  <div *ngFor="let social of resumeForm.controls.social_profiles.controls; let i=index" class="panel panel-default m-t-10">
    <div class="panel-heading" style="min-height: 30px;">
      <span class="glyphicon glyphicon-remove pull-right" *ngIf="resumeForm.controls.social_profiles.controls.length > 1" (click)="removeSocialProfiles(i)"></span>
    </div>
    <div class="panel-body" [formGroupName]="i">
      <social-profile [group]="resumeForm.controls.social_profiles.controls[i]"></social-profile>
    </div>
  </div>
</div>

<div [formGroup]="socialForm">
    <div class="col-md-6">
        <input type="text" class="form-control" placeholder="Enter Network" formControlName="network">
    </div>
    <div class="col-md-6">
        <input type="text" class="form-control" placeholder="Enter Network URL" formControlName="url">
    </div>
</div>

从服务回调获取JSON

{
    "basics_info": {
        "name": "Joh Doe",
        "label": "Programmer",
        "Social_profiles": [{
            "network": "Twitter",
            "url": "https://www.twitter.com/kumarrishikesh12"
        }, {
            "network": "Facebook",
            "url": "https://www.facebook.com/kumarrishikesh12"
        }]
    }
}

添加数据表单工作正常，但如何在页面init的编辑时间以表单的形式显示json的现有嵌套数组（从api获取）？如下图所示

---

在这里，我们假设您已从对象

基础信息中提取了内容，即：

并将JSON分配给变量
data
，这样您就得到了
data
的内容：

{
“姓名”：“Joh Doe”，
“标签”：“程序员”，
“社会概况”：[{
“网络”：“推特”，
“url”：”https://www.twitter.com/kumarrishikesh12"
}, {
“网络”：“Facebook”，
“url”：”https://www.facebook.com/kumarrishikesh12"
}]
}

然后让我们修补这些值。您可以在收到数据后，在收到JSON（或构建表单）后修补这些值。在这里，我在构建表单后修补值

下面我想澄清一下，调用
patchValues
中的另一个方法，它实际上设置了值

patchValues（）{
const control=this.resumeForm.controls['social_profiles']；
this.data.Social_profiles.forEach（x=>{//迭代数组
control.push（this.patch（x.network，x.url））//推送值
});
}
修补程序（网络、url）{
返回此.fb.group({
网络：[网络]，
url:[url]
});
}

孩子应该能很好地理解这些变化。这里有一个演示，变量是不同的，因为我使用了一个现有的表单。但逻辑是完全相同的

您是如何获得json的？@RomanC先生，您可以在我更新的问题中查看它。没关系，但我没有问您json返回了什么，请参阅上面的问题。非常感谢@AJT_82，在观看了plunker之后，我想它会对我有所帮助，所以我会应用它并回复您。当然，让我知道它是如何返回的：）非常感谢您，先生；）
export class SocialProfileComponent {
    @Input('group')
    public socialForm: FormGroup;
}

{
    "basics_info": {
        "name": "Joh Doe",
        "label": "Programmer",
        "Social_profiles": [{
            "network": "Twitter",
            "url": "https://www.twitter.com/kumarrishikesh12"
        }, {
            "network": "Facebook",
            "url": "https://www.facebook.com/kumarrishikesh12"
        }]
    }
}