Как добавить элемент списка / раскрывающийся список, и при выборе элемента он будет активным, тогда он будет фильтровать на основе приложения в angular - PullRequest
Новая
       37

Как добавить элемент списка / раскрывающийся список, и при выборе элемента он будет активным, тогда он будет фильтровать на основе приложения в angular

0 голосов
/ 08 мая 2020

HTML

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

TS 

listOfPosition: NzPlacementType[] = ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'];

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

  appList = [{
    name: 'App1'
  },{
    name: 'App2'
  }]

  statuName(param){
    if(param=="ALL"){return "All"}
     if(param=="ACK"){return "Acknowledged"}
      if(param=="READ"){return "Read"}
       if(param=="NEW"){return "New"}
  }
  handleFilter(targetFilter?: string, value?: any) {
    this.activeFilter[targetFilter] = value;

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

Что Я вот пытаюсь вот добавить appList под приложением. в котором приложение будет раскрывающимся списком.

например: Приложение -App1 -App2 https://i.stack.imgur.com/VW986.png

Когда он щелкнет приложение, оно свернется, затем отобразится список приложений, которые являются App1, App2, App3 до App10. он ограничится 5 предметами. когда его больше 5 элементов, он станет прокручиваемым. https://i.stack.imgur.com/FR0ig.png

после выбора App1 будет так. https://i.stack.imgur.com/dDHTu.png

, но после выбора приложения отображается Application. затем он будет отфильтрован на основе выбранного приложения.

Код: https://stackblitz.com/edit/angular-6zvbjl-ntqykd?file=src / app / app.component.ts

...