Angular 2 中的 jQuery 树表答案

【问题标题】：jQuery Treetable in Angular 2Angular 2 中的 jQuery 树表
【发布时间】：2016-12-07 15:21:16
【问题描述】：

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

zone.js:388Unhandled Promise 拒绝：模板解析错误：不能绑定到“tt-id”，因为它不是“div”的已知属性。 (" {{一世}} ]data-tt-id='{{role.MenuId}}' data-tt-parent="">{{role.Menu}} ;任务：Promise.then；值：错误：模板解析错误：（…）错误：模板解析错误：无法绑定到“tt-id”，因为它不是已知的 'div' 的属性。 (" {{一世}} ]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>

【问题讨论】：

标签： angular typescript treetable

【解决方案1】：

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

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

【讨论】：

@RanjithVaradan 很高兴为您提供帮助，谢谢 :-)