Javascript 设置所有过滤器选项'；主动'；关于初始化-角度

上面的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>

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”类在第一次加载时处于活动状态，但这并没有传递到管道过滤器。我相信这不是一个大的变化，只是我看不到，任何帮助都将不胜感激

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

将其添加到.ts文件并替换空的

filteredLocations:string[]=[]

一开始，我并不遥远。希望它能帮助别人