Как добавить опцию «все» в раскрывающемся списке? - PullRequest
Новая
       21

Как добавить опцию «все» в раскрывающемся списке?

0 голосов
/ 21 февраля 2020

У меня есть выпадающий компонент, который фильтрует список по данным о состоянии. вот мой выпадающий список html: 

<section class="select-wrapper {{wrapperClass}}" [ngClass]="{'expanded': toggle}" (click)="toggleSelect($event)">
    <input 
    type="text" 
    [hidden]="true"
    disabled="true"
    />  
    <div class="data-display" [ngClass]="{'has-value': title}">{{title}}</div>
    <label>
        <span>
          {{label}}
        </span>
      </label>
      <div class="search-wrapper" *ngIf="search && toggle && !disabled">
        <input
        class="search"
        type="text"
        autofocus
        (input)="changeSearch($event.target.value)"
        />
      </div>    
  <ul *ngIf="toggle && !disabled">
    <li *ngFor='let opt of options' (click)="clickAction(opt)" [hidden]="opt.show === false"> {{opt.title}}</li>
  </ul>
</section>

вот как это называется в моем html компоненте: 

          <ciev-select-dropdown *ngIf="orders_states.length > 1" wrapperClass="custom-input-mid" label="Filter by state" (eClickAction)="this.setStateSelected($event)" [options]="orders_states"></ciev-select-dropdown>

вот мой компонент заказов ts: 

  setStateSelected(singleStates: any) {
    singleStates = singleStates;
    this.stateSelected.emit(singleStates);
    if (singleStates !== undefined && singleStates !== null) {
      this.orders.forEach((item: { disabled: boolean; marking: any; }) => {
        item.disabled = item.marking !== singleStates;
      });
    if (singleStates === 'all') {
      this.orders.forEach((item: { disabled: boolean; marking: any; }) => {
        item.disabled = item.marking === singleStates;
      });
    }
    }
  }

  setStateOptions(orders: { marking: any; }) {

    const exist = this.orders_states.find((e: { value: any; }) => e.value === orders.marking);
    if (exist === undefined) {
      let title = '';
      switch (orders.marking) {
        case 'draft': title = 'Unfinished order' ;
        break;
        case 'pending': title = 'Pending confirmation';
        break;
        case 'validated': title = 'Order confirmed';
        break;
      }

      this.options_states.push(
        { title: title , value: orders.marking},
      );
    }
  }

Я хотел бы включить четвертый вариант, который охватывает все остальные состояния, чтобы я мог снова показать полный список. Я пробовал это: 

switch (convention.marking) {
        case 'all': title = 'All your orders';
        break;
        case 'draft': title = 'Unfinished order' ;
        break;
        case 'pending': title = 'Pending confirmation';
        break;
        case 'validated': title = 'Order confirmed';
        break;
      }
      this.options_states.push(
        { title: title , value: convention.marking}        
      );
}

и это: 

      this.options_states.push(
        { title: title , value: convention.marking},
        { title: 'All your orders' , value 'all'}
      );

, но в обоих случаях я создал еще одну опцию для каждого из оригиналов, в общей сложности шесть вариантов поиска, но Ни у одного из них нет полного списка.

Любая помощь приветствуется. Заранее спасибо.

1 Ответ

0 голосов
/ 21 февраля 2020

Я нашел решение.

Я не знаю, правильное ли это решение. В ngOnInit компонента ts, где я использую свой выпадающий компонент, я добавил 

this.options_states.push(
        { title: 'All your orders' , value 'all'}
      );

, и это возвращает массив с четырьмя значениями и позволяет мне выбрать опцию «все», чтобы снова отобразить все мои ордера , Спасибо всем за внимание

...