在角度下拉菜单中设置所选值不起作用

Question

我有一个下拉列表来过滤列表，在其中我设法动态地恢复过滤器选项，但是我不知道如何使它过滤列表并仅显示所选选项的列表。

这里是我的html：

  <div class="dropdown">
    <select-dropdown *ngIf="distinctYear" wrapperClass="input-mid" label="Filter by date" (eClickAction)="this.setDateSelected($event)" [options]="distinctYear"></select-dropdown>
  </div>

这里是我的ts：

public distinctYear = [];

   getDistinctYear(bills) {
    if (bills) {     
      for (const bill of bills) {
        if (this.distinctYear.filter(value => {
          return value.value === bill['billing_at'].split('-')[0];
        }).length === 0) {
          this.distinctYear.push({title: bill['billing_at'].split('-')[0], value:  bill['billing_at'].split('-')[0]});
        }
      }
      this.distinctYear.push({title: 'All your bills', value: 'all'});
      return Array.from(new Set(this.distinctYear));
    }
  }

  setDateSelected(singleDate: any) {
    singleDate = singleDate;
    this.dateSelected.emit(singleDate);
    if (singleDate !== undefined && singleDate !== null) {
      this.bills.forEach((item: { disabled: boolean; billing_at: any; }) => {
        item.disabled = item.disabled !== singleDate;
      });
    if (singleDate === 'all') {
      this.bills.forEach((item: { disabled: boolean; billing_at: any; }) => {
        item.disabled = item.billing_at === singleDate;
      });
    }
    }
  }

有第三个组件作为选择下拉组件：

import { Component, EventEmitter, Input, OnInit, Output, HostBinding, HostListener } from '@angular/core';

@Component({
  selector: 'select-dropdown',
  templateUrl: './select-dropdown.component.html',
  styleUrls: ['./select-dropdown.component.scss']
})
export class SelectDropdownComponent implements OnInit {

  @Input() label = '';
  @Input() wrapperClass: string;
  @Input() options: any;
  @Input() defaultValue = null;
  @Input() search = false;
  @Input() extendSearchIn = [];
  @Input() stateSelected ;
  @Input() dateSelected ;
  @Input() resetConventions;
  @Output() output = new EventEmitter<string>();
  @Output() eClickAction = new EventEmitter<string>();


  private defaultValueStored = null;
  public toggle: boolean;
  public title: string;
  public disabled: boolean;
  private disabledString = 'disabled';
  private selectedObj: any;
  private _data = [];
  private classes: string[];

  @HostBinding('attr.tabindex') tabindex = '0';
  convention: any;

  @HostListener('blur', ['$event']) onBlur(e) {

    if (e.relatedTarget === null) {
      this.toggle = false;
      if (this.search) { this.changeSearch(''); }
    }

  }


  @Input()
  set data(value) {
    this._data = value;
    if (this._data !== undefined) {
      if (this.defaultValueStored !== null && this.defaultValueStored !== undefined && (this.defaultValueStored === this.defaultValue)) {
      //  this.setDefault();
      } else {
        this.resetControl();
      }
      this.setDisabledClass();
    }
  }

  get data() {
    return this._data;
  }


  constructor() {
    this.toggle = false;
    this.title = '';
  }

  ngOnInit() {

  }

  clickAction(option) {
    if ( option.value !== this.selectedObj) {
      this.selectedObj = option.value;
    }
      this.title = option.title;
      this.eClickAction.emit(option.value);
    }




  toggleSelect(e) {
    if (this.disabled || e.target.className === 'search') { return; }
    this.toggle = !this.toggle;
    if (this.search && !this.toggle) { this.changeSearch(''); }
  }


  resetControl() {
    this.clickAction({
      title: '',
      value: null
    });
  }

  setDisabledClass() {

    if (this.classes === undefined) { return; }
    if (this.data !== undefined && this.data.length) {

      this.disabled = false;
      this.classes = this.classes.filter(function(e) { return e !== this.disabledString; }, this);
    } else {
      this.disabled = true;
      this.classes.push(this.disabledString);
    }

    this.wrapperClass = this.classes.join(' ');
    this.toggle = false;

    if (this.defaultValueStored === null) {
      this.resetControl();
    }

  }

//   setDefault() {

//     if (
//           this.defaultValueStored === null ||
//           this.defaultValueStored === undefined ||
//           this.defaultValueStored === '' ||
//           this.data === null ||
//           this.data === undefined
//     ) {
//       return;
//     }

//     if (!this.data.length) {
//       this.setSelected({
//         title: '',
//         value: null
//       });
//       return;
//     }

//   const selected = this.data.find(item => {
//     return item.value === this.defaultValueStored || item.title === this.defaultValueStored;
//   });

//   this.setSelected({
//     title: (selected !== undefined) ? selected.title : '',
//     value: (selected !== undefined) ? selected.value : null
//   });

// }

  changeSearch(searchTerm: string) {

    this.data.forEach(item => {
      item.show = false;
      this.extendSearchIn.forEach(prop => {
        item.show = item.show || this.searchByProperty(item, prop, searchTerm);
      });
    });

  }

  searchByProperty(item: object, property: string, searchTerm: string) {
    return (<String>item[property].toLowerCase()).startsWith(searchTerm.toLowerCase());
  }
}

我设法显示组合中的所有过滤选项。然后在控制台中进行检查，它会设置选定的值，但不会在列表中进行过滤。如果有人可以帮我。预先感谢。

Answer 1

这里的“选择下拉”选择器是什么？它是第三方组件还是您自己的自定义组件？如果那是清楚的，将能够提供更好的建议。

[不管怎样，通常可以将* ngIf指令应用于下拉列表中的选项，但是html不会枚举这些选项。使用给出的语法，您基本上是在将条件应用于整个控件。

如果您有自己的自定义组件，则可以将* ngIf添加到该控件内的选项中。

另一种方法是过滤component.ts中的选项并将这些过滤后的选项传递给组件（即不需要* ngIf指令）