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"

具有动态长度的角度Bootstrap手风琴

1 个答案: