Question

我有一个人员列表，您可以为每个人员打开一个对话框并为其选择一个属性（假设您可以为该人员选择城市）。

我有一份获得订阅的城市列表，它们都显示在对话框中。

我要添加的是对话框的另一部分，其中仅显示为任何人选择的最后5个城市。

实现此目标的最佳方法是什么？我当时正在考虑使用一个数组，该数组最多可以存储5个元素（如何限制数组中可以存储的对象数量？因此，当达到限制时添加新对象时，数组中的最后一项将会被推出？），因此每次我点击一个城市时，都会将该城市存储在该数组中，而我只是在新的最近部分中显示该数组。

这是一个好方法吗？谢谢

Answer 1

export interface RecentlyUsed {
  lastUsed: Date;
}

export interface City implements RecentlyUsed {
  lastUsed: Date;
  id: number;
  name: string;
}

export class MyComponent {
  cities: City[];
  fiveLastUsedCities: [];

  get citiesUsedAfterToday() {
    const today = new Date();
    today.setHours(0);
    today.setMinutes(0);
    today.setSeconds(0);
    return this.citiesUsedAfterDate(today);
  }

  get citiesUsedThisHour() {
    return this.citiesUsedAfterDate(new Date(Date.now() - 1000 * 60 * 60));
  }

  constructor(public service: MyService) {}

  private citiesUsedAfterDate(d: Date) {
    return this.cities && this.cities.filter(city => city.lastUsed > d) || [];
  }

  ngOnInit() {
    this.service.getCities().subscribe(cities => this.cities = cities);
  }

  pushCityInLastUsed(city: City) {
    const tmp = [...this.fiveLastUsedCities, city];
    this.fiveLastUsedCities = tmp.slice(-5);
  }
}

有了这个，您现在可以使用您的吸气剂来获取您决定的时间范围内使用的城市！

角度-如何仅显示最近使用的项目？

1 个答案: