show table仅在使用搜索引擎时使用

Question

我实现了一个搜索JSON文件的搜索引擎。我的问题是我如何隐藏表，直到有人实际搜索的东西?

https://i.stack.imgur.com/poZrt.png

<div class="container-mt-5">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="filterTerm"
/>
</div>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Namn</th>
<th scope="col">Dokument</th>
</tr>
</thead>
<tbody id="t">
<tr *ngFor="let user of docs | filter: filterTerm">
<td id="t">{{ user.name }}</td>
<td id="t">{{ user.subjects.name }}</td>
</tr>
</tbody>
</table>

</div>

附加问题:如何在第二列中显示主语和宾语

{
"name":"Huvudrubrik 1",
"isExpanded":false,
"subjects":[
{
"name":"Bio",
"grade":"A"
},
{
"name":"Chemistry",
"grade":"A"
},
{
"name":"Physics",
"grade":"A"
}
]
}

我试过使用ng-if=" filterter"但我似乎不能让它工作…

Answer 1

你试过使用*ngIf="filterTerm吗?长度比;0"?

<table *ngIf="filterTerm.lenght > 0" class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Namn</th>
<th scope="col">Dokument</th>
</tr>
</thead>
<tbody id="t">
<tr *ngFor="let user of docs | filter: filterTerm">
<td id="t">{{ user.name }}</td>
<td id="t">{{ user.subjects.name }}</td>
</tr>
</tbody>
</table>