如何在下拉列表中添加“全部”选项？答案

【问题标题】：how to add an 'all' option on a dropdown?如何在下拉列表中添加“全部”选项？
【发布时间】：2020-02-21 14:49:04
【问题描述】：

我有一个下拉组件，可以根据“状态”数据过滤列表。这是我的下拉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'}
      );

但在这两种情况下，我都为每个原件创建了一个选项，总共有六个搜索选项，但没有一个具有完整列表。

欢迎任何帮助。提前谢谢你。

【问题讨论】：

标签： javascript typescript drop-down-menu angular7 dropdown

【解决方案1】：

我找到了解决办法。

我不知道这是否是一个正确的解决方案。在我使用下拉组件的 ts 组件的 ngOnInit 中，我添加了

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

这将返回一个包含四个值的数组，并允许我选择一个“全部”选项来再次显示我的所有订单。谢谢大家的关注

【讨论】：