jQuery Treetable в Angular 2

Question

Я создал таблицу дерева jQuery, используя эту ссылку. Мне нужно использовать JSON и создать таблицу дерева на основе этого JSON. но когда я делаю это, я получаю ошибку. Я не могу связать динамическое значение data-tt-id='{{role.MenuId}}', Любой совет будет полезен, спасибо.

zone.js: 388Необработанное отклонение обещания: ошибки синтаксического анализа шаблона: невозможно связать с 'tt-id', поскольку оно не является известным свойством 'div'. (" {{i}} ]data-tt-id='{{role.MenuId}}' data-tt-parent="">{{role.Menu}}; Задача: Promise.then; Значение: Ошибка: Ошибки синтаксического анализа шаблона:(…) Ошибка: Ошибки синтаксического анализа шаблона: невозможно связать с 'tt-id', поскольку оно не является известным свойством 'div'. ("{{I}}] data-tt-id = '{{role.MenuId}}' data-tt-parent = ""> {{role.Menu}}

Вот мой код:

app.component.ts:

  constructor(private service: RolesService) { }
  roles: any[];
  ngOnInit() {
    jQuery("table").treetable();
    this.service.getAllRoles().subscribe(roles => {
      this.roles = roles
    })
  }

app.component.html:

<div class="container" style="margin:150px auto;">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th style="width:400px">Menu</th>
        <th>isView</th>
        <th>isAdd</th>
        <th>isEdit</th>
        <th>isPrint</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let role of roles; let i = index">
        <th scope="row">{{i}}</th>
        <td>
          <div class="tt" data-tt-id='{{role.MenuId}}' data-tt-parent="">{{role.Menu}}</div>
        </td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

Используйте привязку атрибутов для распознавания углового компилятора, чтобы рассматривать их как атрибут.

[attr.data-tt-id]='role.MenuId' [attr.data-tt-parent]=""