Bootstrap Angular动态长度手风琴

Question

我正在学习Angular 4与Bootstrap的组合。 这个想法是从我的后端服务器接收一个列表数组，并且能够在单个手风琴中显示每个列表（折叠）。 我的问题是：由于列出的数组的长度不同，我必须动态创建的元素，这就造成这个错误：

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/[email protected]: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/[email protected]: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"