具有动态长度的 Angular 中的 Bootstrap 手风琴

Question

我正在结合 Bootstrap 学习 Angular 4。 这个想法是从我的后端服务器接收一组列表，它工作正常，并在一个手风琴中显示每个列表（折叠）。 我的问题如下：由于列表数组的长度不同，我必须动态创建元素，这会产生这个错误：

    zone.js:569 Unhandled Promise rejection: Template parse errors:
Can't bind to 'target' since it isn't a known property of 'tr'. ("  <tbody>
    <tr *ngFor="let listObj of lists"  class="panel panel-default" data-toggle="collapse" [ERROR ->]data-target="#collapse{{listObj.index}}">
      <td><div class="panel-group">
          <div class="p"): ng:///AppModule/TestComponent.html@8:90 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'target' since it isn't a known property of 'tr'. ("  <tbody>
    <tr *ngFor="let listObj of lists"  class="panel panel-default" data-toggle="collapse" [ERROR ->]data-target="#collapse{{listObj.index}}">
      <td><div class="panel-group">
          <div class="p"): ng:///AppModule/TestComponent.html@8:90

应该是什么样子的：Tested with hardcoded HTML

我的 HTML：

<table class="table table-hover ">
  <thead>
   <tr>
     <th>Description</th>
     <th>Author</th>
   </tr>
 </thead>
  <tbody>
    <tr *ngFor="let listObj of lists"  class="panel panel-default" data-toggle="collapse" data-target="#collapse{{listObj.index}}">
      <td><div class="panel-group">
          <div class="panel-heading">
              {{listObj.list.listDescription}}
              {{listObj.index}}
          </div>
          <div id="collapse{{listObj.index}}" class="panel-collapse collapse">
            <ul class="list-group">
              <li *ngFor="let item of listObj.list.listItems" class="list-group-item col-lg-12">{{item}}</li>
            </ul>
          </div>
      </div>
    </td>
    <td>{{listObj.list.listAuthorName}}</td>
      <td>
        <div class="input-group">
          <input type="text" class="form-control" #listAdd>
          <span class="input-group-btn">
            <button (click)="onClickAddItem(list.listId, listAdd.value)" class="btn btn-default" type="button">add</button>
            <button class="btn btn-danger" type="button">Delete</button>
          </span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

列表对象数组采用标准 JSON 格式

还请原谅我的英语，谢谢你的帮助

Answer 1

我猜你正在寻找类似的属性绑定

[attr.data-target]="'#collapse' + listObj.index"