根据前端状态设置角度记录的样式
根据前端状态设置角度记录的样式
提问于 2019-03-26 02:52:31
在我的Angular前端应用中，我有一个通过*ngFor显示的记录列表，如下所示：
<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">该列表显示了某个status的记录。所以我有一个记录的网格视图，其中status等于processing，另一个status等于completing，依此类推。
我们现在有了一个新的规范，在第一次点击记录之前，记录应该在网格视图中以粗体显示。换句话说，如果我将一条记录的status从processing更改为completing，那么在status: completing记录的网格视图中，表示该新记录的行应该具有粗体样式，直到用户第一次单击该记录为止。从那时起，网格视图应该会像显示其他记录一样显示该记录，并将font-weight设置为normal。
我知道对于像Angular forms这样的东西，您可以根据需要使用markAsPristine()和markAsTouched()来设置输出样式。但是，在这样的网格视图中，我该如何处理呢？需要说明的是，这里没有我可以依赖的数据库属性。这只需要依赖于前端属性和状态。
还有一个额外的要求:这需要应用于所有前端用户。这是一个内部应用程序。所以我们有几个人在看网格列表。如果一个用户单击一条记录，那么所有用户随后都应该在网格视图中看到该记录为非粗体。你知道我该如何做到这一点吗？
回答 2
Stack Overflow用户
发布于 2019-03-26 03:10:41
You need a style binding.
<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }"
[style.font-weight]="record?.status === 'processing' ? '300' : 'bold'">
</tr>您也可以尝试使用*ngIf="“
<div *ngIf="some condition">
<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">
</div>
<div *ngIf="some other condition">
<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">
</div>Stack Overflow用户
发布于 2019-03-26 03:44:31
您可以在record中添加属性(例如: wasClickedFirsTime)，您可以这样做：
<tr (click)="record.wasClickedFirsTime = true" [ngClass]="{'is-bold': !record.wasClickedFirsTime}" *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">当然还有：
.is-bold {
font-weight : bold
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55344663
复制相关文章
相似问题