Question

正如您在下面的图片中看到的那样，它对我不起作用。模板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>

Answer 1

我敢打赌这是因为<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问题中有一些很好的提示：https://github.com/aurelia/binding/issues/409

Aurelia：如何在现有的html中注入组件模板？

1 个答案: