javascript - 在初始化时将所有过滤器选项设置为 'active' - Angular

Question

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

上面的 stackblitz 将演示一些管道过滤器。如果您单击“北、南或东”的位置，它将填充 *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 文件

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 对象，所以它从所有值开始，因此都是事件的。

我设法让“事件”类在第一次加载时处于事件状态，但这并没有传递到管道过滤器。我敢肯定它不是一个大的变化只是看不到它，任何帮助将不胜感激!

Answer 1

filteredLocations = this.timeLine.map(a => a.location);

将其添加到 .ts 文件并替换空的 filteredLocations: string[] = [];

最初我离最终结果并不遥远。希望对其他人有帮助。