Angular - как отображать только недавно использованные предметы? - PullRequest
Новая
       7

Angular - как отображать только недавно использованные предметы?

0 голосов
/ 24 августа 2018

У меня есть список людей, и для каждого вы можете открыть диалоговое окно и выбрать для него свойство (скажем, вы можете выбрать город для человека).

У меня есть список городов, которые я получаюс подпиской, и все они отображаются в диалоговом окне.

То, что я хочу добавить, - это еще один раздел в диалоговом окне, где я показываю только последние 5 городов, выбранных для любого человека.

Как лучше всего это реализовать?Я думал о том, чтобы иметь массив, в котором я храню до 5 элементов (как вы можете ограничить количество объектов, которые могут быть сохранены в массиве? Поэтому, когда вы добавите новый, когда будет достигнут предел, последний элемент в массиве будетбыть вытесненным?), поэтому каждый раз, когда я нажимаю на город для другого или того же человека, этот город сохраняется в этом массиве, и я просто отображаю в новом недавнем разделе этот массив.

этохороший подход?спасибо

1 Ответ

0 голосов
/ 24 августа 2018 
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);
  }
}

Теперь вы можете использовать свои геттеры, чтобы получить города, используемые в выбранном вами временном интервале!

...