如何在自定义表格组件中使用子模板来显示每一行?

Posted

技术标签:

【中文标题】如何在自定义表格组件中使用子模板来显示每一行?【英文标题】:How to use a child template inside a custom table component to display each row? 【发布时间】:2017-11-19 15:01:52 【问题描述】:

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

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

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

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

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

【问题讨论】:

此处未发布的所有其他内容都可以正常工作,直接将模板内容复制到 mtTable.component.html 会按预期填充表格。无论如何,请随时请求您可能感兴趣的任何其他代码(或直接查看github repo)。 感谢您的 github 回购 【参考方案1】:

我会替换

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

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

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

另见

What's the difference between @ViewChild and @ContentChild?

【讨论】:

所以我认为 ViewChildren 只寻找呈现的 html 而 ContentChild 寻找 html 而不管它是否被呈现?无论如何,我仍然得到完全相同的异常。 是的,ContentChild 查看父组件中组件标签之间的内容 我很抱歉。我错误地将其更改为 ContentChildren。它现在可以正常工作。你有我最深切的感谢。

以上是关于如何在自定义表格组件中使用子模板来显示每一行?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jsDoc 在自定义组件中记录此关键字?

uniapp在自定义模板中引入js之后在组件里怎么使用里面的方法

在自定义样式组件模板字符串上运行 stylelint

如何在自定义模板中使用 Django 的管理员布尔图标?

在自定义视图和视图控制器中使用 AutoLayout

如何从持久存储中获取数据并显示在自定义表格视单元上?有没有示例代码?