Question

我目前有Angular2-Datatable的实现，如此

 <table class="table table-sm responsive" [mfData]="users" #mf="mfDataTable" [mfRowsOnPage]="10">
    <thead>
       <tr>
          <th>
              &nbsp;
          </th>
          <th>
             <mfDefaultSorter by="name">Name</mfDefaultSorter>
          </th>
          <th class="no-sort hidden-sm-down">
             <mfDefaultSorter by="role">Roles</mfDefaultSorter>
          </th>
       </tr>
    </thead>
    <tbody>
       <tr *ngFor="let person of mf.data">
          <td>
             <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-warning" (click)="open(person)">
                   <i class="fa fa-fw fa-edit"></i>
                </button>                      
          </td>
          <td>
             <h6>
                <span>
                    <a href="mailto:{{person.email}}">
                       <i class="fa fa-envelope"></i>
                    </a>
                 </span>
                 {{person.firstName}} {{person.lastName}}
             </h6>
          </td>
          <td>
             <h6>{{person.role}}</h6>
          </td>
       </tr>
       <tr *ngIf="(mf.data).length === 0">
          <td colspan="100">No matches</td>
       </tr>
    </tbody>
    <tfoot>
       <tr>
          <td colspan="12">
             <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
          </td>
       </tr>
    </tfoot>
 </table>

我想要做的是在触发open（）句柄时创建子表。我之前在Angular JS中已经完成了这个，但是很难弄清楚如何使用Angular 2.我是否需要创建一个新组件并使用jQuery将模板加载到行中？

Answer 1

我假设您要将该表加载到该人的行下。

您可以使用template - 元素尝试这样做。

<tbody>
   <!-- wrap that template-element around your row(s) -->
   <template ngFor let-person [ngForOf]="mf.data">
      <tr>
         <td>
            <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
               <button type="button" class="btn btn-warning" (click)="open(person)">
                  <i class="fa fa-fw fa-edit"></i>
               </button>                                 
            </div> <!-- this was missing ! -->
         </td>
         <td>
            <h6>
                <span>
                    <a href="mailto:{{person.email}}"><i class="fa fa-envelope"></i></a>
                </span>
                {{person.firstName}} {{person.lastName}}
            </h6>
         </td>
         <td><h6>{{person.role}}</h6></td>
      </tr>
      <!-- .. your new table will be shown under that 'data-row' .. -->
      <tr *ngIf="person.showDetails"> <!-- any condition here to show details .. ! -->
         <td>
            <table>
               <!-- insert your data here .. ! -->
            </table>
         </td>
      </tr>
   </template>
   <tr *ngIf="(mf.data).length === 0">
      <td colspan="100">No matches</td>
   </tr>
</tbody>

live-demo：https://plnkr.co/edit/pzOBJtg2S7sO2vckbUjr?p=preview

Answer 2

除了this answer（并提到https://plnkr.co/edit/pzOBJtg2S7sO2vckbUjr?p=preview）之外，我在代码中添加了以下内容以隐藏已打开的元素（如手风琴）：

toggleDetails(person: any) {
    for (let obj of this.persons) {
        obj.hasOwnProperty("showDetails") ? obj['showDetails'] = false : false;
    }
item.showDetails = !item.showDetails;
}

我担心的两件事：首先不确定如果对象数组persons在性能方面变得越来越大，会发生什么。其次，将showDetails属性名称连接到变量（甚至是const）将是很好的，该变量将在模板和组件部分中用于封装和DRY。

将表添加到表行动态角度2

2 个答案: