html - Angular 8 Nestet Objektinterpolasjon

Dette er min versjon av Angular CLI:

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

Mens jeg lager en Angular 8-applikasjon, prøver jeg å bruke nestede FormGroups som tilsvarer følgende objekt:

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

Det er en indre FormGroup av FormControls for seksjon 1 og seksjon 2, og en ytre FormGroup som holder de to indre formgruppene. Dette er definert i component.ts.

I component.html prøver jeg å iterere gjennom den ytre FormGroup sin indre FormGroups, og skrive ut de indre FormControls. Dette er koden jeg har så langt:

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

Linjen <div *ngFor="let question of boilerplate[{{section.key}}]"> feiler med en feilmelding som:

Uventet tegn {, ventet identifikator, nøkkelord eller streng

Jeg har prøvd følgende løsninger, ingen av dem har fungert for meg:

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

Jeg har prøvd en rekke andre {} og [] kombinasjoner og rekkefølger, og jeg innser nå at nestet interpolasjon ikke kan parses.

Har noen et forslag til hvordan jeg kan oppnå dette? Jeg bruker nestede FormGroups fordi det er mulig at jeg vil ha flere lag med seksjoner i fremtiden. Formatet på Boilerplate-objektet kan endres hvis det vil gjøre problemet løsbart (fordi jeg definerte det selv).

REDIGER

Følgende var løsningen som løste dette problemet:

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

Svar #1

Jeg prøver som nedenfor,

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

Utdata er som nedenfor,

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

Svar #2

Du trenger å bruke et keyValue-filterrør, da kan du bare ha følgende syntaks, dette lar deg bruke ngFor* for å iterere gjennom objekter i stedet for arrays.

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

Du kan deretter gjøre det samme for de nestede objektene inni til du har de riktige dataene vist. Dette støttes ikke i alle versjoner av Angular, men fungerer definitivt i 8.

Der du har objekter med nøkkelen som et tall, ville jeg prøve å manipulere det til et array, noe som vil hjelpe deg med å holde dette litt enklere. Dette lar deg bruke tradisjonell *ngFor

Relaterte artikler