jQuery Angular 2 中的树表

Question

我使用这个 link 创建了一个 jQuery 树 Table。我需要消耗一个 json 并基于那个 json 创建一棵树 table。但是当我这样做时，我得到一个错误。我无法绑定动态值 data-tt-id='{{role.MenuId}}'。任何建议都会有所帮助，谢谢。

zone.js:388Unhandled Promise rejection: Template parse errors: Can't bind to 'tt-id' since it isn't a known property of 'div'. (" {{i}} ]data-tt-id='{{role.MenuId}}' data-tt-parent="">{{role.Menu}} ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: Can't bind to 'tt-id' since it isn't a known property of '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

利用属性绑定识别angular编译器将它们视为属性。

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

jQuery Angular 2 中的树表

jQuery Treetable in Angular 2

angular

typescript

treetable