使用angular5/rxjs刷新下拉列表内容

我试图创建一个下拉列表，当它被点击时刷新它的内容。 下面是我的解决方案，但我正在寻找更好的方法

是否可以不在MyComponent中使用

@ViewChild('dropdownRef') dropdownEl: ElementRef;

让它继续工作？ 或者其他的想法

export class MyComponent implements OnInit, AfterViewInit {

  @ViewChild('dropdownRef')
  dropdownEl: ElementRef;

  dropdownClicks$: Observable<any>;

  items: Observable<any[]>;

  constructor(public myService: MyService) { }

  ngOnInit() {
    this.items = this.myService.getItems();
  }

  ngAfterViewInit() {
    this.dropdownClicks$ =
      Observable.fromEvent(this.dropdownEl.nativeElement, 'click');

    this.dropdownClicks$.subscribe(obs => this.items = this.myService.getItems() );
  }
}



export class MyService {

  url = 'http://localhost:11111/api/items';

  constructor(private httpClient: HttpClient) { }

  getItems(): Observable<any[]> {
    return this.httpClient.get<any[]>(this.url);
  }
}

导出类MyComponent实现OnInit，AfterViewInit{
@ViewChild（'dropdownRef'）
dropdownEl:ElementRef；
下拉点击$：可观察

{{item.text}

为什么不使用内置的对html事件的角度支持，比如

@Picci good point，但是如果我使用
*ngFor=“let item of getItems（）| async”
，则会有对服务器的不可屏蔽请求。我的测试表明
项：Observable；
必须保留，否则会有很多请求。
<div #dropdownRef class="btn nav-item dropdown" ngbDropdown>
  <a class="nav-link dropdown-toggle" id="id01" href="#" ngbDropdownToggle>Items</a>
  <ul class="dropdown-menu" aria-labelledby="id01" ngbDropdownMenu>
    <li *ngFor="let item of items | async" class="dropdown-item" href="#">{{item.text}}</li>
  </ul>
</div>