Angular 根据前端状态设置角度记录的样式

在我的Angular前端应用程序中，我有一个通过

*ngFor

显示的记录列表，如下所示：

<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">

该列表显示特定

状态的记录。因此，我有一个记录网格视图，其中
状态
等于
处理
，另一个
状态
等于
完成
，等等

我们现在有了一个新的规范，在第一次单击记录之前，它应该在网格视图中以粗体显示。换句话说，如果我将记录的
状态
从
处理
更改为
完成
，那么在我的
状态的网格视图中：完成
记录，表示新记录的行应该具有粗体样式，直到用户第一次单击该记录。从那时起，网格视图应该像其他记录一样显示该记录，并将
font-weight
设置为
normal

我知道对于像角度形状这样的东西，可以使用
markAsPristine（）
和
markAsTouched（）
根据需要设置输出样式。但是在这样的网格视图中，我该如何处理这个问题呢？澄清一下，这里没有我可以依赖的数据库属性。这只需要依赖前端属性和状态

还有一个附加要求：这需要适用于所有前端用户。这是一个内部应用程序。所以我们有几个人在查看网格列表。如果一个用户单击一条记录，那么所有用户随后都会在网格视图中看到该记录未绑定。你知道我怎样才能做到这一点吗？
你需要一个样式绑定。
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=“”

您需要样式绑定。

您也可以尝试*ngIf=“”
您可以在记录中添加属性（例如：wasClickedFirsTime），您可以执行以下操作：

<tr (click)="record.wasClickedFirsTime = true" [ngClass]="{'is-bold': !record.wasClickedFirsTime}" *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">

您可以在记录中添加属性（例如：wasClickedFirsTime），您可以执行以下操作：

<tr (click)="record.wasClickedFirsTime = true" [ngClass]="{'is-bold': !record.wasClickedFirsTime}" *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">

我们现在有了一个新的规范，在第一次单击>之前，记录应该在网格视图中以粗体显示

那个很简单。您可以向
记录
集合的元素添加布尔
单击的
属性，或者将单击元素的ID存储在数组中，以您认为更整洁的为准

还有一个附加要求：这需要适用于所有前端用户。这是一个
内部应用程序。所以我们有几个人在查看网格列表。如果一个用户点击
在一条记录上，所有用户随后都应该在
网格视图

这是一个棘手的问题。我能想到的唯一答案是WebRTC。我相信它满足了以下要求：无需服务器参与的客户端到客户端的通信

检查是否有类似的情况
我会为你工作的

但是：如果Alice现在单击
项目1，Bob在一小时后登录并在单击时看到
项目1
，我认为如果服务器端不提供持久性，这是不可能做到的

我们现在有了一个新的规范，在第一次单击>之前，记录应该在网格视图中以粗体显示

那个很简单。您可以向
记录
集合的元素添加布尔
单击的
属性，或者将单击元素的ID存储在数组中，以您认为更整洁的为准

还有一个附加要求：这需要适用于所有前端用户。这是一个
内部应用程序。所以我们有几个人在查看网格列表。如果一个用户点击
在一条记录上，所有用户随后都应该在
网格视图

这是一个棘手的问题。我能想到的唯一答案是WebRTC。我相信它满足了以下要求：无需服务器参与的客户端到客户端的通信

检查是否有类似的情况
我会为你工作的

但是：如果Alice现在点击
项目1，Bob在一小时后登录并在点击时看到
项目1
，我认为如果服务器端不提供持久性，这是不可能的。
我想你误解了这个问题。给我看看json模式，这会有什么帮助？再次澄清，挑战不是显示具有特定“状态”的记录。那部分已经完成了。问题是在前端列表视图中对那些尚未单击的记录进行粗体样式设置。Re:The
*ngIf
，“某些条件”指的是什么？同样，这也是一个挑战。首先，我不为你工作，其次，让我看看你有什么和你想要什么，（一个图像，一段拉伸，什么）通过准确地展示你想要看到的，在这里讲述你所有的故事会更有帮助。我想你误解了这个问题。让我看看json模式。这会有什么帮助？再次澄清，挑战不是显示具有特定“状态”的记录。那部分已经完成了。问题是在前端列表视图中对那些尚未单击的记录进行粗体样式设置。Re:The
*ngIf
，“某些条件”指的是什么？同样，这也是一个挑战。首先，我不为你工作，其次，向我展示你拥有的和你想要的，（一张图片，一段拉伸，等等）通过准确地展示你想要看到的，在这里讲述你所有的故事会更有帮助。你是否建议我实际将此属性添加到数据库中的记录中，或者以某种方式仅将其存储在前端状态？如果希望所有用户都能在线反映更改，我认为有必要将此属性添加到数据库中的记录中。我看不出另一种方式，但其他用户怎么能发现呢？这就是我想弄明白的。但是，据我所知，纯粹为了前端导航而向数据库记录中添加属性将被视为不好的做法。没关系
.is-bold {
    font-weight : bold
}