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中的颜色“更改日期”或“大小”会发生变化，如果该值不等于具有最新日期的Object值（在本例中为id为1的Object）。

Answer 1

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

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

首先，您必须确定哪个是原始对象，即用于比较的对象。

我是在ngOnInit()内完成的。

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

希望这有帮助

Answer 2

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

比较Angular 4中数组内的对象

2 个答案: