Сделайте все параметры фильтра активными при инициализации - Angular - PullRequest
Новая
       28

Сделайте все параметры фильтра активными при инициализации - Angular

1 голос
/ 27 сентября 2019

https://stackblitz.com/edit/timeline-angular-7-wbff3f

Приведенный выше стэкблиц продемонстрирует несколько трубчатых фильтров.Если вы щелкнете по расположению «Север, Юг или Восток», он заполнит цикл * ngFor - эти фильтры можно включить / выключить и использовать «многофильтровый канал».По умолчанию я хочу, чтобы все эти кнопки фильтров «активные» или «вкл.» Отображали полный заполненный список, чтобы вы могли затем отключить фильтры.В противном случае список будет пустым при первой загрузке!

.html файл 

<button [class.active]="entry.isLocationActive" (click)="toggle(entry.location); entry.isLocationActive = !entry.isLocationActive" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>


<my-timeline-entry *ngFor="let entry of timeLine | filter:filteredYear:'year'| multifilter:filteredLocations:'location' " timeEntryHeader={{entry.year}} timeEntryContent={{entry.detail}} timeEntryPlace={{entry.place}} timeEntryLocation={{entry.location}}></my-timeline-entry>

.ts file 

filteredLocations: string[] = [];

toggle(location) {
    let indexLocation = this.filteredLocations.indexOf(location);
    if (indexLocation >= 0) {
      this.filteredLocations = this.filteredLocations.filter((i) => i !== location);
    } else {
      this.filteredLocations.push(location);
    }
}

Я поиграл с предварительным заполнением объекта filteredLocations всеми значениями, поэтому он начинается с их всех, следовательно, активных.

Мне удалось получить активным класс 'active' при первой загрузке, но он не прошел через фильтр канала.Я уверен, что это не большое изменение, просто не вижу его, любая помощь будет принята с благодарностью!

1 Ответ

1 голос
/ 27 сентября 2019 
filteredLocations = this.timeLine.map(a => a.location);

Добавив это в файл .ts и заменив пустой filteredLocations: string[] = [];

Я не был далеко изначально в конце.Надеюсь, что это помогает другим.

...