CODEWITHSUNDEEP
javascripttwitter-bootstrapangularpromise
Taldorr
Taldorr

Reputation: 195

Bootstrap Accordion in Angular with dynamic length

I am learning Angular 4 in combination with Bootstrap. The idea is to receive an array of lists from my backend server, which works fine, and to display each list in one single accordion (collapse). My problem is the following: As the array of lists varies in length, I have to create the elements dynamically, which creates this error:

    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

How it should look like:Tested with hardcoded HTML

My 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>

The array of list-objects is in standard JSON-format

also exuse my english and thank you for your help

Upvotes: 2

Views: 2721

Answers (1)

yurzui
yurzui

Reputation: 214235

I guess you are looking for attribute binding like

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

Upvotes: 3

Related Questions