javascript - 如何使其多部分选择过滤 Angular

Question

HTML

 <nz-dropdown class="filter-dropdown" [nzTrigger]="'click'" nzPlacement="bottomRight">
              <a nz-dropdown nz-tooltip nzTitle="Feature not functional">
                {{ activeFilter.filterBy }} <i nz-icon [type]="activeFilter.order === 'ASC' ? 'up' : 'down'"></i>
              </a>
              <ul nz-menu>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('filterBy', 'Application')">Application</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('filterBy', 'Date')">
                  Date
                  <i nz-icon nzType="check" nzTheme="outline"></i>
                </li>
                <li nz-menu-divider></li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'ALL')">All</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'ACK')">Acknowledged</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'READ')">Read</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'NEW')">New</li>
                <li nz-menu-divider></li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('order', 'ASC')">Ascending</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('order', 'DESC')">Descending</li>
                <li nz-menu-divider></li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('grouped', true)">Grouped</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('grouped', false)">Ungrouped</li>
              </ul>
            </nz-dropdown>

TS

 activeFilter = {
    filterBy: 'Date',
    length: 100,
    status: 'ALL',
    order: 'ASC',
    grouped: false
  };

handleFilter(targetFilter?: string, value?: any) {
    this.activeFilter[targetFilter] = value;

    console.log(this.activeFilter);
    if (targetFilter === 'order') {
      // ?direction = 'asc' || 'desc']
    }
  }

如何实现多部分选择过滤？ 这是列表的示例:/image/QJKAg.png

选择下拉菜单时，应默认为日期->全部->升序->未分组

应该是这样的 /image/GyEv1.png

Answer 1

我修改了下面链接中的代码

https://stackblitz.com/edit/angular-6zvbjl-uoffds

我为每个过滤器元素添加了条件图标

 <i nz-icon nzType="check" *ngIf="activeFilter.filterBy=='Application'" nzTheme="outline"></i>

在你的状态按钮中我编写了函数，因为它有两个以上的选项。对于其他人，我将条件放在 html 中

<a nz-dropdown nz-tooltip nzTitle="Feature not functional">
        {{ activeFilter.filterBy }} ->  {{ statuName(activeFilter.status) }} ->  {{ activeFilter.order=="ASC" ? "Ascending" : "Descending" }} ->  
        {{ activeFilter.grouped? "Groupped" : "Ungrouped" }}
      </a>

 statuName(param){
    if(param=="ALL"){return "All"}
    else if(param=="ACK"){return "Acknowledged"}
    else if(param=="READ"){return "Read"}
    else if(param=="NEW"){return "New"}
  }

对于你的分隔线，我放置了带有类名的CSS代码

.divider {
          height: 11px !important;
          margin: 4px 0;
          overflow: hidden;
          line-height: 0;
          background-color: #e8e8e887;
      }