Angular 在“角度”下拉列表中设置选定值无效

我有一个下拉列表来过滤列表，在这个下拉列表中，我可以动态地恢复过滤选项，但我不知道如何让它过滤列表并只显示所选选项

这里是我的html：

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

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

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

我设法在组合中显示所有过滤选项。在控制台中进行检查时，它会设置所选的值，但不会在列表中进行筛选。

---

如果有人能帮我一把。提前感谢。

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

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

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

---

另一种方法是过滤组件中的选项。ts并将过滤后的选项传递给组件，即无需*ngIf指令

是我制作的第三个组件。我已经用代码编辑了原始问题，以防万一。非常感谢您，我已经在component.ts中解决了上一个选项过滤选项。非常感谢你的灵感！

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