根据前端状态的状态对 Angular 记录进行样式化答案

【问题标题】：Styling Angular Records Based on Status of Front-end State根据前端状态的状态对 Angular 记录进行样式化
【发布时间】：2019-03-25 18: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 表单之类的东西，您可以根据需要使用 markAsPristine() 和 markAsTouched() 来设置您的输出样式。但是我将如何在这样的网格视图中处理这个问题？澄清一下，这里没有我可以依赖的数据库属性。这需要仅依赖前端属性和状态。

还有一个附加要求：这需要适用于所有前端用户。这是一个内部应用程序。所以我们有几个人在看网格列表。如果一个用户点击了一条记录，那么所有用户随后都应该在网格视图中看到该记录是非粗体的。关于我如何实现这一点的任何想法？

【问题讨论】：

标签： angular ng-class

【解决方案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>

【讨论】：

我认为你误解了这个问题。
显示 json 架构
这有什么帮助？再次澄清，挑战不是显示具有特定“状态”的记录。那部分已经完成了。问题是在前端列表视图中为那些尚未点击的记录设置粗体样式。
回复：*ngIf，“某些条件”指的是什么？同样，这就是挑战。
首先我不为你工作，其次告诉我你有什么和你想拥有什么，（图像，拉伸，一些东西）通过准确地展示你想看到的，更有帮助在这里讲述你所有的故事

【解决方案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
}

【讨论】：

你是在建议我将这个属性实际添加到数据库中的记录中，还是以某种方式仅将其存储在前端状态？
如果你想让所有用户都在线反映更改，我认为有必要将此属性添加到数据库中的记录中。我没有看到其他方法，但其他用户怎么会发现？
这就是我想要弄清楚的。但是，据我了解，纯粹为了前端导航而向数据库记录添加属性将被认为是不好的做法。
不同意“不良做法”问题。无论我从什么设备登录，GMail 都知道哪些电子邮件已被阅读，哪些未阅读。这不是坏习惯，它非常标准。

【解决方案3】：

我们现在有一个新规范来满足在第一次单击之前应该在网格视图中以粗体显示记录的位置。

这很容易。您可以将布尔值 clicked 属性添加到 records 集合的元素，或者将被点击元素的 id 存储在一个数组中，以您认为更简洁的方式为准。

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

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

检查是否有这样的事情 https://stackblitz.com/edit/angular-webrtc 会为你工作。

但是：如果 Alice 现在点击 Item 1，而 Bob 在一个小时后登录并且应该看到 Item 1 被点击，那我认为可以'在没有服务器端提供持久性的情况下完成。

【讨论】：