如何在下拉菜单中添加“全部”选项？

Question

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

这是我的订单部分：

  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'}
      );

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

欢迎任何帮助。预先谢谢你。

Answer 1

我找到了解决方案。

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

this.options_states.push(
        { title: 'All your orders' , value 'all'}
      );
这将返回具有四个值的数组，并允许我选择一个'all'选项以再次显示所有订单。谢谢大家的关注