Question

我是前端的新手，我正在尝试创建一个项目。根据所需的设计，我有五个按钮。四个按钮指示不同的状态（错误，过期，风险，正常），第五个按钮指示所有四个状态的总和。现在，这些按钮充当切换按钮。

我想基于四个按钮中的多个选择或“总计”的单个选择来实现过滤器。例如，如果我单击“错误”和“风险”，我应该能够应用一些CSS来表示多项选择，并且我希望将其作为逗号分隔的过滤器（错误，风险）传递给后端API。再次单击后，我应该可以取消选择按钮。同样，当我单击全部时，所有其他按钮（在此示例中为错误，风险）也应未选中。有人可以指出正确的方向吗。

模板代码

<div class="top-row">
  <div class="total" (click)="onClick('TOTAL')" [ngClass]="{'selected': eventState === 'TOTAL'}">
        <div>{{ total }}</div>
       <div>
         Total
       </div> 
   </div>
   <div class="states">
      <button (click)="onClick('ERROR')" [ngClass]="{'selected': state === 'ERROR'}">
          <div>{{ error }}</div>
          <div>Error</div>
      </button>
     <button (click)="onClick('EXPIRED')" [ngClass]="{'selected': state === 'EXPIRED'}">
         <div>{{ expired }}</div>
           Expired
       </button>

     <button (click)="onClick('RISK')" [ngClass]="{'selected': state === 'RISK'}">
         <div>{{ risk }}</div>
         <div>&nbsp;Risk</div>
     </button>
     <button (click)="onClick('OK')" [ngClass]="{'selected': state === 'OK'}">
         <div>{{ ok }}</div>
         <div>&nbsp;Ok</div>
     </button>
   </div> 
</div>

这是CSS文件

.top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 15px;
    background-color: white;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2);

    .selected { 
        background-color: rgba(189,218,241,.35);
    }    

    .total{
        margin-right: 10px;
        margin-left: 10px;
        width: 100px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        font-family: Roboto-Medium,sans-serif;
        font-size: 14px;
        color: #004677;
        div:first-child{
            font-size: 20px;
        }
    }

    .states {
        background-color: white;
        flex-grow: 1;
        border-left: 1px solid black;
        padding-left: 10px;

        button {
            margin-right: 10px;
            width: 100px;
        }

        button div {
            line-height: 30px;
        }

        button div:first-child {
            font-size: 20px;
        }
    }

Answer 1

在某些情况下，您可以使用 push() 和 splice() 来实现组件逻辑。

  states = { ERROR: 'ERROR', EXPIRED: 'EXPIRED', RISK: 'RISK', OK: 'OK', TOTAL: 'TOTAL' };
  selectedStates: string[] = [];

  constructor() {}

  onClick(type: string): void {

    // If clicked states not equal to TOTAL
    if (type !== this.states.TOTAL) {

          // Add/Remove states besides TOTAL
          const index = this.selectedStates.indexOf(type);
          if (index === -1) {
            this.selectedStates.push(type);
          } else {
            this.selectedStates.splice(index, 1);
          }
          // Remove TOTAL if exists
          const totIndex = this.selectedStates.indexOf(this.states.TOTAL);
          if (totIndex > -1) {
            this.selectedStates.splice(totIndex, 1);
          }

    } 
    // If clicked states equal to TOTAL
    else {

      const index = this.selectedStates.indexOf(this.states.TOTAL);
      if (index > -1) {

        this.selectedStates.splice(index, 1);
      } else {

        this.selectedStates = [];
        this.selectedStates.push(type);
      }
    }
  } 

  send(): void {
    console.log(this.selectedStates);
  }

使用 includes() 数组函数在html中设置 ngClass ，如下所示。

<div class="top-row">
  <div class="total" (click)="onClick(states.TOTAL)" [ngClass]="{'selected': selectedStates.includes(states.TOTAL)}">
        <div>{{ total }}</div>
       <div>
         Total
       </div> 
   </div>
   <div class="states">
      <button (click)="onClick(states.ERROR)" [ngClass]="{'selected': selectedStates.includes(states.ERROR)}">
          <div>{{ error }}</div>
          <div>Error</div>
      </button>
     <button (click)="onClick(states.EXPIRED)" [ngClass]="{'selected': selectedStates.includes(states.EXPIRED)}">
         <div>{{ expired }}</div>
           Expired
       </button>

     <button (click)="onClick(states.RISK)" [ngClass]="{'selected': selectedStates.includes(states.RISK)}">
         <div>{{ risk }}</div>
         <div>&nbsp;Risk</div>
     </button>
     <button (click)="onClick(states.OK)" [ngClass]="{'selected': selectedStates.includes(states.OK)}">
         <div>{{ ok }}</div>
         <div>&nbsp;Ok</div>
     </button>
   </div> 
</div>

我在CSS中做了一项更改。将 .selected 类放置在所有其他类之外。

.top-row {
    ...
} 
.selected { 
    background-color: rgba(189,218,241,.35);
}

找到工作StackBlitz Demo。

基于多个按钮选择的过滤器

1 个答案: