html - 角度一次选择多个按钮

Question

在我的应用程序中，我有一个显示图表的小部件。在同一个小部件中，有 6 个图表。1 表示请求，1 表示要约，1 表示订单。所有这 3 个也有 3 个不同的选项。本周、上周和两周前。我希望用户能够单击请求图，然后单击周选项以查看每个选项。我希望这三个按钮（周）取决于请求等。但截至目前，所有按钮都是单独行动的。我应该怎么办？

PS.我用的是角保险丝

HTML：

<fuse-widget [@animate]="{value:'*'}" fxLayout="row" fxFlex="60" class="widget widget5">
<!-- Front -->
<div class="fuse-widget-front">
   <div class="px-16 border-bottom" fxLayout="row wrap" fxLayoutAlign="space-between center">
      <!-- <div fxFlex class="py-16 h3">{{widgets.widget5.title}}</div> -->
      <div fxFlex="0 1 auto" class="px-11 h3" fxLayout="row">
         <button mat-button class="px-11 inline-block bg-purple-400 rounded" 
         *ngFor="let titleRanges of widgets.widget5.titleRanges | keys" 
         (click)="widget5.currentRange = titleRanges.key" 
         [ngClass]="{'accent' : widget5.currentRange == titleRanges.key}">
         {{titleRanges.value}} 
         </button>
      </div>
      <div fxFlex="0 1 auto" class="py-16" fxLayout="row">
         <button mat-button class="px-16" 
         *ngFor="let range of widgets.widget5.ranges | keys" 
         (click)="widget5.currentRange = range.key" 
         [ngClass]="{'accent' : widget5.currentRange == range.key}">
         {{range.value}} 
         </button>
      </div>
   </div>
   <div fxLayout="row wrap" fxLayoutAlign="start start">
      <div class="h-420 my-16" fxLayout="row" fxFlex="100" fxFlex.gt-sm="50">
         <ngx-charts-bar-vertical-stacked
         *fuseIfOnDom
         [scheme]="widget5.scheme"
         [results]="this.widgets.widget5.mainChart[this.widget5.currentRange]"
         [gradient]="widget5.gradient"
         [xAxis]="widget5.xAxis"
         [yAxis]="widget5.yAxis"
         [legend]="widget5.legend"
         [showXAxisLabel]="widget5.showXAxisLabel"
         [showYAxisLabel]="widget5.showYAxisLabel"
         [xAxisLabel]="widget5.xAxisLabel"
         [yAxisLabel]="widget5.yAxisLabel"
         (select)="widget5.onSelect($event)"
         >
         </ngx-charts-bar-vertical-stacked>
      </div>
      <div class="my-16" fxFlex="100" fxLayout="row wrap" fxFlex.gt-sm="50">
         <div fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="center" *ngFor="let widget of widgets.widget5.supporting | keys" class="mb-24">
            <div class="px-24 py-48 h-64">
               <div class="h4 secondary-text text-center">{{widget.value.label}}</div>
               <div class="mat-display-1 m-0 text-center">
                  {{widget.value.count[widget5.currentRange]}}
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- / Front -->
</fuse-widget>

标签： htmlangulartypescript