javascript - 按药丸/按钮过滤而不是使用选择 - Angular

Question

我正在使用 Angular 进行构建，并使用过滤器管道从 *ngFor 循环的下拉列表中过滤所选选项。然后相应地过滤内容。我想将选择选项换成按钮或药丸。因此，当单击一个按钮时，过滤器就会发生 - 该按钮将充当开/关开关，因此您可以过滤多个选项。

这是我的 stackblitz 示例 - https://stackblitz.com/edit/timeline-angular-7-tyle1f

    <div class="form-group row">
      <div class="col-sm">
        <select class="form-control" name="locationFilter" id="locationFilter" [(ngModel)]="filteredLocation">
          <option value="All">All</option>
          <option *ngFor="let entry of timeLine | filterUnique" value="{{entry.location}}">{{entry.location}}
          </option>
        </select>
      </div>
//Button filters below
       <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
            <button class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>
       </div>
    </div>

我不确定如何让按钮以与不进行过滤相同的方式工作......感谢任何帮助!？

Answer 1

给按钮绑定(bind)一个点击事件(click)="filteredLocation = entry.location"

像这样尝试:

 <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
     <button  (click)="filteredLocation = entry.location" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>
  </div>

Working Demo