比较 Angular 中数组内的对象 4

Question

我有一个包含多个对象的数组，例如：

[
 {"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"},
 {...}
]

我这样显示的那些对象：

<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"><strong>Change date: </strong>{{cache.fileage}}</p>
      <p class="card-text"><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>

现在我希望 p-tag "change date" 或 "size" 中的颜色发生变化，如果该值不等于具有最新日期的 Object 的值（在本例中为 Object ID 为 1).

Answer 1

我已经为你做了一个快速的 Stackblitz：

https://stackblitz.com/edit/angular-fffau2

首先你必须决定哪个是原始对象，哪个是要用来比较的对象。

我是在 ngOnInit().

里面做的

然后，当你存储它时，你可以在 HTML 中进行比较以添加 CSS class 和样式。

希望对您有所帮助

Answer 2

您需要在 ts 端找到最新日期并将其存储在一个变量中。您可以将该变量与 ngFor 当前值进行比较，并使用 ngClass.

更改 class

比较 Angular 中数组内的对象 4

Compare objects inside an array in Angular 4

typescript

angular

angular5