Невозможно отобразить древовидную структуру - PullRequest
Новая
       13

Невозможно отобразить древовидную структуру

1 голос
/ 13 марта 2019

Я пытаюсь отобразить древовидную структуру в пользовательском интерфейсе.Но получаю ошибку.

Невозможно выполнить привязку к «цели», поскольку она не известна свойству «i».("v * ngFor =" let item of files ">] data-target =" # {{item.reference}} "class =" fa fa-caret-right "* ngIf ="! (item.children.length === "): ng: ///AppModule/SidenavComponent.html@9: 34

Хотя это свойство существует в моем файле JSON, как показано ниже: 

[
  {
    "name": "great grandparent",
    "reference": "great_grandparent",
    "children": [
      {
        "name": "childless grandsibiling",
        "reference": "childless_grandsibiling",
        "children": []
      },
      {
        "name": "grandparent",
        "reference": "grandparent",
        "children": [
          {
            "name": "childless sibiling",
            "reference": "childless_sibling",
            "children": []
          },
          {
            "name": "another childless sibiling",
            "reference": "another_childless_sibiling",
            "children": []
          },
          {
            "name": "parent",
            "reference": "parent",
            "children": [
              {
                "name": "child",
                "reference": "child",
                "children": []
              },
              {
                "name": "another child",
                "reference": "another_child",
                "children": []
              }
            ]
          }
        ]
      }
    ]
  }
]

И мойhtml файл выглядит следующим образом: 

<div class="row">
  <div class="col-md-12">
    <div id="google_translate_element"></div>
  </div>
</div>
<div class="container sidenav-tree">
  <ng-template #recursiveList let-files>
    <div *ngFor="let item of files">
      <div class="row node-item">
        <i data-toggle="collapse" data-target="#{{item.reference}}"
        class="fa fa-caret-right" *ngIf="!(item.children.length===0)"></i>
        {{item.name}}
      </div>
      <div id="{{item.reference}}" class="container collapse" *ngIf="!(item.children.length===0)">
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
      </div>
    </div>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: files }"></ng-container>
</div>

Я не могу выяснить причину этой ошибки. Я пытался со всеми возможными условиями, которые я мог бы применить, чтобы он работал. Пожалуйста, помогите мне решить эту проблему

1 Ответ

0 голосов
/ 13 марта 2019

Angular ожидает, что элемент <i> будет иметь вход с именем target.Поскольку вы используете data-target, что является сокращенной записью для [target].

Измените HTML-код на: 

<i data-toggle="collapse" attr.data-target="#{{item.reference}}"

Таким образом, вы привязываетесь к атрибуту, а не кпривязка свойства или ввода

...