按药丸/按钮过滤，而不是使用选择 - 角度

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

(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>

Answer 2

关键是将按钮/开关的值分配给您的filteredLocation变量，如下所示

<button (click)="filteredLocation = entry.location" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>

希望这可以帮助 ：）