Не удается получить доступ к переданной объектной переменной в повторно используемом ng-шаблоне

Question

Цикл по объекту JSON, чтобы отобразить его как HTML в моем шаблоне компонента.Повторное использование встроенного ng-шаблона для вывода HTML.

Начиная с первой итерации, я не могу получить доступ к свойствам Ojbect на level, так как это undefined, однако вывод HTML-подобендревовидная структура построена точно так же, как JSON.Похоже, я не передаю переменную oject в правильном порядке.

JSON

    { "content": [
            {
                "tag": "paragraph",
                "html": "\r\n",
                "children": [
                    {
                        "tag": "header",
                        "level": "1",
                        "html": "\r\n91\/439\/EC Driving Licences"
                    },
                    {
                        "tag": "header",
                        "level": "2",
                        "html": "\r\nANNEX II - chapter II"
                    }
                ]
            },
            {
                "tag": "br"
            },
            {
                "tag": "paragraph",
                "children": [
                    {
                        "tag": "table",
                        "html": "\r\n",
                        "children": [
                            {
                                "tag": "tr",
                                "children": [
                                    {
                                        "tag": "td",
                                        "html": "II    ."
                                    },
                                    {
                                        "tag": "td",
                                        "html": "\r\nMember States may implement the appropriate measures to ensure that drivers who have lost the knowledge, skills and behaviour as described under points 1 to 9 can recover this knowledge and these skills and will continue to exhibit such behaviour required for driving a motor vehicle.",
                                        "children": [
                                            {
                                                "tag": "br"
                                            },
                                            {
                                                "tag": "br"
                                            },
                                            {
                                                "tag": "list",
                                                "type": "disc",
                                                "html": "\r\n",
                                                "children": [
                                                    {
                                                        "tag": "li",
                                                        "html": "Recognise traffic dangers and assess their seriousness;"
                                                    },
                                                    {
                                                        "tag": "li",
                                                        "html": "Have sufficient command of their vehicle not to create dangerous situations and to react appropriately should such situations occur;"
                                                    },
                                                    {
                                                        "tag": "li",
                                                        "html": "Comply with road traffic regulations, and in particular those intended to prevent road accidents and to maintain the flow of traffic;"
                                                    },
                                                    {
                                                        "tag": "li",
                                                        "html": "Detect any major technical faults in their vehicles, in particular those posing a safety hazard, and have them remedied in an appropriate fashion;"
                                                    },
                                                    {
                                                        "tag": "li",
                                                        "html": "Take account of all the factors affecting driving behaviour (e.g. alcohol, fatigue, poor eyesight, etc.) so as to retain full use of the faculties needed to drive safely;"
                                                    },
                                                    {
                                                        "tag": "li",
                                                        "html": "Help ensure the safety of all road users, and in particular of the weakest and most exposed by showing due respect for others."
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }

Шаблон

<div *ngFor="let rootLevel of jsonHTML; let i = index;">
  <span *ngIf="rootLevel.tag">{{i}} [{{rootLevel.tag}}]</span {{rootLevel.html}}

    <ng-container *ngTemplateOutlet="nextLevelTemplate; context: { level: rootLevel.children, index: i }">
    </ng-container>

</div>

<ng-template #nextLevelTemplate let-level="level" let-i="index">

  <span *ngIf="level && level.tag">[{{level.tag}}]</span><span *ngIf="level && level.html">[{{level.html}}]</span>

  [tag]{{level?.tag}}[/tag] 

  [html]{{level?.html}}[/html]

  -{{level | json}}-

  <div *ngFor="let nextLevel of level; let i = index;">
    <ng-container *ngTemplateOutlet="nextLevelTemplate; context: { level: nextLevel.children, index: i }">
    </ng-container>
  </div>

</ng-template>

Вывод

0 [paragraph] 
  0 -[object Object],[object Object]-
    0 [tag][/tag] [html][/html] --
    1 [tag][/tag] [html][/html] --

1 [br] 1 [tag][/tag] [html][/html] --

2 [paragraph] 2 [tag][/tag] [html][/html] -[object Object]-
  0 [tag][/tag] [html][/html] -[object Object]-
    0 [tag][/tag] [html][/html] -[object Object],[object Object]-
      0 [tag][/tag] [html][/html] --
      1 [tag][/tag] [html][/html] -[object Object],[object Object],[object Object]-

      0 [tag][/tag] [html][/html] --
      1 [tag][/tag] [html][/html] --
      2 [tag][/tag] [html][/html] -[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]-
        0 [tag][/tag] [html][/html] --
        1 [tag][/tag] [html][/html] --
        2 [tag][/tag] [html][/html] --
        3 [tag][/tag] [html][/html] --
        4 [tag][/tag] [html][/html] --
        5 [tag][/tag] [html][/html] --

Вывод и снимок экрана следующего узла JSON

"children": [
  {
    "tag": "header",
    "level": "1",
    "html": "\r\n91\/439\/EC Driving Licences"
  },
  {
    "tag": "header",
    "level": "2",
    "html": "\r\nANNEX II - chapter II"
  }
]

Как вы можете видеть, в массиве есть 2 элемента, шаблон дважды зацикливается на нем, но свойства tag и html не могут быть доступны.

Это проблема с областью видимости, что ng-template не может быть повторно использован таким образом?

Answer 1

Ответ на мой вопрос: Рекурсивные ссылки на ng-шаблоны

Действительно проблема с областями видимости.Очевидно, все дело в правильном прохождении контекста.

<!-- Define the recursive template. -->
<ng-template #nodeTemplateRef let-node>

    <div class="node" [class.node--selected]="( node === selectedTreeNode )">

        <a (click)="selectNode( node )" class="node__label">
            {{ node.label }}
        </a>

        <div *ngIf="node.children.length" class="node__children">

            <!-- Invoke the recursive template. -->
            <ng-template
                ngFor
                [ngForOf]="node.children"
                [ngForTemplate]="nodeTemplateRef">
                <!--
                    NOTE: The "$implicit" property of the ngFor context is what will
                    be made available to the template ref's implicit let-node binding.
                -->
            </ng-template>

        </div>

    </div>

</ng-template>

<ng-template
    [ngTemplateOutlet]="nodeTemplateRef"
    [ngTemplateOutletContext]="{ $implicit: data.root }">
</ng-template>

<p class="note">
    <em>Ng-For Template Rendering</em>
</p>

... директивы ngFor успешно смогли рекурсивно визуализировать ngTemplate, в котором он был определен.

Когдаиспользуя директиву ngFor, невозможно явно передать объект «context» - директива ngFor неявно передает объект ngForContext в качестве контекста шаблона.Это означает, что моя директива ng-template должна использовать «неявный» экспорт контекста ngFor в качестве привязки шаблона «let-node».

В этом случае это не проблема, так как я хочу только передатьв одном значении.Но для большей гибкости мы можем отказаться от директивы ngFor и просто использовать другой ng-шаблон для рекурсивной визуализации шаблона (во многом так же, как мы используем экземпляр ng-template для инициации рекурсии) ...