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"
        }
    }
}

Существует внутренняя FormGroup FormControls для раздела 1 и раздела 2, а также внешняя FormGroup, содержащая две внутренние формы. Это определено в component.ts.

В component.html я пытаюсь перебрать внутренние FormGroups внешней FormGroup и распечатать внутренние FormControls. Вот код, который у меня есть:

<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}}]"> завершается с ошибкой:

Неожиданный токен {, ожидаемый идентификатор, ключевое слово или строка

Я пробовал следующие решения, ни одно из которых не помогло мне:

<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 можно изменить, если это сделает проблему разрешимой (потому что я сам ее определил).

EDIT

Решение этой проблемы было решено следующим образом:

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

Answer 1

Вам нужно использовать keyValue pipe pipe, тогда вы можете просто использовать следующий синтаксис, это позволит вам использовать ngFor* для итерации по объектам, а не по массивам.

<div *ngFor="let question of boilerplate | keyValue">
    {{ question.key }} - {{ question.value }}
</div>

Затем вы можете сделать то же самое для вложенных объектов внутри, пока у вас не отобразятся правильные данные.Это поддерживается не во всех версиях Angular, но определенно хорошо в 8.

Если у вас есть Объекты с ключом в виде числа, я бы попытался преобразовать это в массив, который поможет вам сохранить это немногоболее простой.Позволяет вам использовать традиционные *ngFor

Answer 2

Я стараюсь, как показано ниже,

<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" }