Bootstrap Angular動態長度手風琴

我正在學習Angular 4與Bootstrap的組合。這個想法是從我的後端服務器接收一個列表數組，並且能夠在單個手風琴中顯示每個列表（摺疊）。我的問題是：由於列出的數組的長度不同，我必須動態創建的元素，這就造成這個錯誤：Bootstrap Angular動態長度手風琴

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格式

也是任何藉口我的英語水平，並感謝您的幫助

來源

2017-06-02 Taldorr

結合謝謝你的人，它的工作，如果你張貼的答案，我會標記它 – Taldorr

我猜你正在尋找的屬性一樣

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

來源

2017-06-02 16:32:19 yurzui

Bootstrap Angular動態長度手風琴

回答

相關問題