Angular 4中数组对象对比及动态样式调整实现

要实现这个需求，我们可以分两步走：先在组件中确定数组里日期最新的基准对象，然后在模板中动态判断当前项与基准对象的差异并应用样式。

Step 1: 获取日期最新的缓存项 #

在你的Angular组件类中，添加一个getter属性来计算数组中fileage最新的对象。这个getter会自动响应数组的变化，确保基准对象始终是最新的：

import { Component } from '@angular/core';

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourComponent {
  ldapcaches = [
    {"id":1,"host":"localhost","filesize":73,"fileage":"2018-01-26 09:26:40"},
    {"id":2,"host":"localhost","filesize":21,"fileage":"2018-01-26 09:26:32"}
    // 其他对象...
  ];

  // 获取日期最新的缓存项
  get latestCache() {
    if (!this.ldapcaches || this.ldapcaches.length === 0) return null;
    
    return this.ldapcaches.reduce((latest, current) => {
      // 将字符串日期转为Date对象进行比较
      const latestDate = new Date(latest.fileage);
      const currentDate = new Date(current.fileage);
      return currentDate > latestDate ? current : latest;
    });
  }

  // 你的refreshFile和restartServer方法（保持原有逻辑即可）
  refreshFile(id: number) { /* ... */ }
  restartServer(id: number) { /* ... */ }
}

Step 2: 模板中动态应用样式 #

接下来修改你的模板，使用Angular的属性绑定来判断当前项与基准对象的filesize/fileage是否一致，不一致时改变文字颜色。

方式1：直接内联样式（快速实现） #

如果只需要简单的颜色变化，可以直接用[style.color]绑定：

<div class="col-md-6 space" *ngFor="let cache of ldapcaches">
  <div class="card border-dark">
    <div class="card-body">
      <h3 class="card-title"><strong>Server: </strong>{{cache.host}}</h3>
      <!-- 对比fileage，不一致时显示红色 -->
      <p class="card-text" 
         [style.color]="cache.fileage !== latestCache?.fileage ? 'red' : 'inherit'">
        <strong>Change date: </strong>{{cache.fileage}}
      </p>
      <!-- 对比filesize，不一致时显示红色 -->
      <p class="card-text" 
         [style.color]="cache.filesize !== latestCache?.filesize ? 'red' : 'inherit'">
        <strong>Size: </strong>{{cache.filesize + " Bytes"}}
      </p>
    </div>
    <div class="card-footer text-muted">
      <div class="btn-group btn-group-sm float-right">
        <button type="button" class="btn btn-primary" (click)="refreshFile(cache.id)">Refresh Cache</button>
        <button type="button" class="btn btn-outline-primary" (click)="restartServer(cache.id)">Restart Apache</button>
      </div>
    </div>
  </div>
</div>

方式2：使用CSS类（更灵活，推荐） #

如果需要更复杂的样式（比如加粗、背景色），先在组件的CSS文件中定义一个类：

.diff-highlight {
  color: #dc3545; /* 使用Bootstrap的危险色，和你的按钮风格统一 */
  font-weight: 500; /* 可选：加粗突出差异 */
}

然后在模板中用[ngClass]绑定：

<div class="col-md-6 space" *ngFor="let cache of ldapcaches">
  <div class="card border-dark">
    <div class="card-body">
      <h3 class="card-title"><strong>Server: </strong>{{cache.host}}</h3>
      <p class="card-text" 
         [ngClass]="{'diff-highlight': cache.fileage !== latestCache?.fileage}">
        <strong>Change date: </strong>{{cache.fileage}}
      </p>
      <p class="card-text" 
         [ngClass]="{'diff-highlight': cache.filesize !== latestCache?.filesize}">
        <strong>Size: </strong>{{cache.filesize + " Bytes"}}
      </p>
    </div>
    <div class="card-footer text-muted">
      <div class="btn-group btn-group-sm float-right">
        <button type="button" class="btn btn-primary" (click)="refreshFile(cache.id)">Refresh Cache</button>
        <button type="button" class="btn btn-outline-primary" (click)="restartServer(cache.id)">Restart Apache</button>
      </div>
    </div>
  </div>
</div>

注意事项 #

• 使用latestCache?.fileage中的可选链操作符?.，可以避免数组为空时出现空指针错误。
• 如果你的fileage字符串格式不是标准可解析格式，可能需要调整日期转换逻辑，比如使用第三方日期库（如moment.js）来处理比较。

内容的提问来源于stack exchange，提问作者Pedro Marques