html - Angular 8 嵌套对象插值

Question

这是我的 Angular CLI 版本:

Angular CLI: 7.3.9
Node: 12.2.0
OS: win32 x64
Angular: 8.0.2

在制作 Angular 8 应用程序时，我尝试使用与以下对象对应的嵌套 FormGroups:

const Boilerplate: any = {
    1: {
        desc: "section1",
        content: {
            1: "question 1.a:",
            2: "question 1.b:",
            3: "question 1.c"
        }
    },
    2: {
        desc: "section2",
        content: {
            4: "question 2.a:",
            5: "question 2.b:",
            6: "question 2.c",
            7: "question 2.d"
        }
    }
}

第 1 部分和第 2 部分有一个由 FormControl 组成的内部 FormGroup，还有一个包含两个内部表单组的外部 FormGroup。这是在 component.ts 中定义的。

在 component.html 中，我尝试遍历外部 FormGroup 的内部 FormGroup，并打印内部 FormControl。这是我到目前为止的代码:

<form [formGroup]="sectionGroup">
   <div *ngIf="boilerplate">
       <div *ngFor="let section of boilerplate | keyvalue">
           {{ boilerplate[section.key].desc }}

           <div formGroupName="{{section.key}}">
               <div *ngFor="let question of boilerplate[{{section.key}}]">
                   <-- things -->
               </div>
           </div>
       </div>
   </div>

行<div *ngFor="let question of boilerplate[{{section.key}}]">失败并显示错误消息:

Unexpected token {, expected identifier, keyword, or string

我尝试了以下解决方案，但没有一个对我有用:

<div *ngFor="let question of {{boilerplate}}.{{section.key}}">

<div *ngFor="let question of {{boilerplate[section.key]}}">

<div *ngFor="let question of {{boilerplate[{{section.key}}]}}">

<td *ngFor="let question of Section">{{boilerplate[[section.key]]}}</td>

我尝试了各种其他 {} 和 [] 组合和顺序，现在我意识到嵌套插值是不可解析的。

有没有人建议我如何实现这一目标？我正在使用嵌套的 FormGroups，因为将来我可能会有额外的部分层。如果可以解决问题(因为我自己定义了它)，可以更改 Boilerplate 对象的格式。

编辑

以下是解决此问题的解决方案:

<div *ngFor="let question of boilerplate[section.key].content | keyvalue">
    {{question.value}}
</div>

Answer 1

我尝试如下，

<div [formGroup]="formGroup">
<div *ngIf="boilerplate">
<div *ngFor="let section of boilerplate | keyvalue">
      {{ boilerplate[section.key].desc }}
  <div>
    <div *ngFor="let question of boilerplate[section.key].content | keyvalue">
      {{ question | json }}
    </div>
  </div>
</div>

输出如下，

section1
{ "key": "1", "value": "question 1.a:" }
{ "key": "2", "value": "question 1.b:" }
{ "key": "3", "value": "question 1.c" }
section2
{ "key": "4", "value": "question 2.a:" }
{ "key": "5", "value": "question 2.b:" }
{ "key": "6", "value": "question 2.c" }
{ "key": "7", "value": "question 2.d" }