如何在自定义表格组件中使用子模板来显示每一行? [英] How to use a child template inside a custom table component to display each row?

问题描述

我尝试了很多事情都失败了，以至于我的代码最终变得一团糟.我对任何事情都持开放态度，但如果你想要一个基地:

I've tried so many things and failed that my code ended up being a total mess. I'm open to anything but, in case you want a base:

我发现的最有前途的方法如下，但失败了，出现异常templateRef.createEmbeddedView is not a function":

The most promising approach I found was the following, but failed with the exception "templateRef.createEmbeddedView is not a function":

app.component.html

app.component.html

<br>

<mt-table [fields]="userFields" [(rows)]="users" [pageSize]="10" [searchString]="searchString"
          class="round">

  <template let-row="row">
    <td>
      {{ row.name }}
    </td>
    <td>
      <i class="fa fa-{{ row.gender === 'male' ? 'mars' : 'venus' }}"></i>
    </td>
    <td>
      {{ row.email }}
    </td>
    <td>
      {{ row.phone }}
    </td>
    <td>
      {{ row.address.number }}
    </td>
    <td>
      {{ row.address.street }}
    </td>
    <td>
      {{ row.address.city }}
    </td>
    <td>
      {{ row.address.state }}
    </td>
    <td align="center">
      <span class="actions show-on-tr-hover">
        <i class="fa fa-pencil-square opacity-on-hover"></i>
        <i class="fa fa-minus-square opacity-on-hover"></i>
      </span>
    </td>
  </template>

</mt-table>

mtTable.component.html

mtTable.component.html

  <thead *ngIf="fields?.length">
    <tr>
      <th
        *ngFor="let field of fields"
        [ngClass]="{ 'sortable': field.isSortable }"
        (click)="activateColumn(field)">
        {{ field.label }}

        <span *ngIf="field.isSortable" class="sorting">
          <div class="arrow" [ngClass]="{ 'active-sorting': field === activeColumn && !field.reverseOrder }">&#9650;</div>
          <div class="arrow" [ngClass]="{ 'active-sorting': field === activeColumn && field.reverseOrder }">&#9660;</div>
        </span>
      </th>
    </tr>
  </thead>

  <tbody *ngIf="rows?.length">
    <tr *ngFor="let row of getPaginatedRows()"
        (click)="onRowClick(row)" class="clickable">
      <template [ngTemplateOutlet]="rowTemplate" [ngOutletContext]="{ row: row }"></template>
    </tr>
  </tbody>

  <tfoot *ngIf="pageSize">
    <tr>
      <td [attr.colspan]="fields?.length">
        <mt-table-pagination
          [rows]="getProcessedRows()"
          [pageSize]="pageSize"
          [(output)]="pagination">
        </mt-table-pagination>
      </td>
    </tr>
  </tfoot>

</table>

你们中有人知道为什么会失败或知道任何可能的替代方法吗?

Do any of you have an idea on why this fails or know any possible alternative approaches?

推荐答案

我会替换

@ViewChildren(TemplateRef) rowTemplate: TemplateRef<any>;

与

@ContentChild(TemplateRef) rowTemplate: TemplateRef<any>;

因为我想使用 Light DOM 中的模板

because i want to use template from Light DOM

另见

• @ViewChild 和@ContentChild 有什么区别?

这篇关于如何在自定义表格组件中使用子模板来显示每一行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！