元素更改时的事件
元素更改时的事件
提问于 2019-03-25 10:19:15
使用Angular，我构建了一个与用于搜索的输入交互的表。在按enter键触发搜索后，几乎可以立即在控制台中获得结果。但是，在视图中更新表可能需要几秒钟的时间。在此期间，我想向用户显示内容正在加载，但需要在HTML完成更新时隐藏内容。
下面是表格的HTML：
<div class="table-responsive" *ngIf="searchData?.length" style="padding-bottom: 10px;">
<table class="table table-striped table-sm">
<thead>
<tr>
<th *ngFor="let header of headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let record of searchData">
<td>{{record.AccountNo}}</td>
<td>{{record.CustomerTaxID_KB}}</td>
<td>{{record.custName}}</td>
<td><a href="{{record.FILE_NAME_KB}}">{{record.FILE_NAME_KB}}</a></td>
<td>{{record.category}}</td>
<td>{{record.IncidentComments}}</td>
</tr>
</tbody>
</table>
</div>当表完成更新时，我如何监听表上的更改？
Stack Overflow用户
发布于 2019-03-25 12:23:03
您可以创建一个类来加载，并动态添加或删除类。下面是我希望它能帮助你的例子
<div class="table-responsive" *ngIf="searchData?.length" style="padding-bottom: 10px;">
<table class="table table-striped table-sm">
<thead>
<tr>
<th *ngFor="let header of headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let record of searchData; let i = index" [ngClass]="{ searchData.length === i ? '' : 'loadingClass'}">
<!-- Hear you can see that we add class loadingClass when length is not equal to array length -->
<td>{{record.AccountNo}}</td>
<td>{{record.CustomerTaxID_KB}}</td>
<td>{{record.custName}}</td>
<td><a href="{{record.FILE_NAME_KB}}">{{record.FILE_NAME_KB}}</a></td>
<td>{{record.category}}</td>
<td>{{record.IncidentComments}}</td>
</tr>
</tbody>
</table>
</div>让我知道它是否正常工作
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55330499
复制相关文章
相似问题
腾讯云开发者
