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 ，而鲍勃从现在开始登录一个小时，并且应该看到Item 1被点击，则那个我认为没有服务器端提供持久性就无法完成。

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

3 个答案:

您也可以尝试* ngIf =“”