3

正如您在下图中看到的那样，它对我不起作用。模板 html 出现在表格上方，而不是我预期的标题下方。

在此处输入图像描述

我想要做的是创建一个与表数据一起使用的可选过滤器组件。添加组件时，它应该在标题列下方显示一个额外的行，并带有输入/按钮，允许您在特定列上放置过滤器。

所以很明显我做错了什么，或者做我不应该做的事情。如果是这样，我该如何正确注入filter-table组件的模板？

我的app.html.

   <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>City</th>
                <th>Username</th>
                <th>Email</th>
                <th>Nationality</th>
            </tr>
            <table-filter containerless></table-filter>
        </thead>
        <tbody>
            <tr>
                <td>??</td>
                <td>Name</td>
                <td>City</td>
                <td>Username</td>
                <td>Email</td>
                <td>Nationality</td>
            </tr>
        </tbody>
    <table>

我的table-filter组件。

// Viewmodel
@customElement('table-filter')
export class TableFilterComponent {
    // Nothing here    
}

// Template
<template>
    <tr>
        <th>Filter header 1</th>
        <th>Filter header 2</th>
        <th>Filter header 3</th>
        <th>Filter header 4</th>
        <th>Filter header 5</th>
        <th>Filter header 6</th>
    </tr>
</template>
4

1 回答 1

7

我敢打赌这是因为<table-filter />它不是元素内部的有效<thead />元素。

试试这个，看看它是否有效：

<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>City</th>
        <th>Username</th>
        <th>Email</th>
        <th>Nationality</th>
    </tr>
    <tr as-element="table-filter" containerless></table-filter>
</thead>

然后只需删除<tr />自定义元素模板中的元素。

<template>
   <th>Filter header 1</th>
   <th>Filter header 2</th>
   <th>Filter header 3</th>
   <th>Filter header 4</th>
   <th>Filter header 5</th>
   <th>Filter header 6</th>
</template>

最后，在这个 Github issue 中有一些很好的提示：https ://github.com/aurelia/binding/issues/409

于 2017-09-07T21:26:46.277 回答