基于前端状态的角度记录样式

Question

在我的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表单的东西，你可以根据需要使用markAsPristine()和markAsTouched()来设置输出样式。但是我如何在这样的网格视图中处理这个？为了澄清，我没有可以依赖的数据库属性。这需要依赖前端属性和状态。

还有一项要求：这需要适用于所有前端用户。这是一个内部应用程序。所以我们有几个人在看网格列表。如果一个用户单击某条记录，则所有用户随后应在网格视图中将该记录视为未分页。有什么想法，我怎么能做到这一点？

Answer 1

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>

Answer 2

您可以在记录中添加属性（例如：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
}

Answer 3

我们现在有了一个新的规范来满足在第一次点击之前在网格视图中加粗记录的位置。

那个很容易。您可以将一个布尔clicked属性添加到records集合的元素中，或者将单击元素的ID存储在一个数组中，无论哪个看起来更整洁。

还有一项要求：这需要适用于所有前端用户。这是一个内部应用程序。所以我们有几个人在看网格列表。如果一个用户单击某条记录，则所有用户随后应在网格视图中将该记录视为未分页。

这个很棘手。我能想到的唯一答案是WebRTC。我相信它符合要求：客户端到客户端的通信，没有服务器的参与。

检查这样的https://stackblitz.com/edit/angular-webrtc是否适合您。

但是：如果爱丽丝现在点击Item 1，并且Bob从现在起一小时内登录并且应该看到Item 1被点击，我认为如果没有服务器端提供持久性，我们就无法完成。