如何使其成为多部分 select 过滤 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']
    }
  }

如何实现多选过滤？这是列表的示例：https://i.stack.imgur.com/QJKAg.png

选择下拉菜单时应该有默认值，即 Date->All->Ascending->Ungrouped

应该是这样的 https://i.stack.imgur.com/GyEv1.png

Answer 1

我修改了下面的代码link

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 代码与 class 名称

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

如何使其成为多部分 select 过滤 angular

How to make it multi part select filtering angular

javascript

angular

typescript

ng-zorro-antd