小编Sub*_*jee的帖子

我有一个下拉指令，我想将其添加到我的故事书中，但它不起作用。当我运行故事书上的按钮显示时，但如果我单击该按钮，则模板不会显示。

import {moduleMetadata} from '@storybook/angular';
import {CommonModule} from '@angular/common';
import {DropdownModule} from '../../app/base-components/dropdown';

export default {
  title: 'dropdown',
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [CommonModule, DropdownModule]
    })
  ]
};

export const withDropdownTemplate = () => ({
  template: '<button dropDown></button>',
  props: {
    displayTpl: `<ng-template #dropdownTpl>
  <ul>
    Hello World
  </ul>
</ng-template>`
  }
});

我创建了一个自动完成和一个选项组件，当我们在输入字段中输入搜索短语时，我调用 Web 服务并获取数据，然后在选项组件中显示列表，但是当我从该列表中选择一个选项并设置值时到输入字段，然后 Web 服务全部再次触发。我怎样才能防止这种情况发生？示例是材料设计自动完成的工作原理，我在从选项列表中选择某些内容时想要类似的功能。谢谢。

<app-rx-search-field>
          <input id="rx-search-field" type="search" class="form-control __search_field" name="search" placeholder="Search" autocomplete="off" [formControl]="providerSchoolSearchCtrl" formControlName="school" />
          <app-rx-options [optionsList]="suggestedSchoolsList$ | async" [key]="'school.name'" (optionSelected)="onOptionSelected($event)"></app-rx-options>
        </app-rx-search-field>

this.providerSchoolSearchCtrl.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(),
        mergeMap(search => of(search).pipe(
          delay(500)
        ))
      ).subscribe({
      next: value => {
        this.store.dispatch(new GetSchoolRequest({isRequesting: true, searchPhrase: value}));
      }
    });

public onOptionSelected = (event: any) => {
    console.log(event);
// This is to set the value for the input field
    this.providerSchoolSearchCtrl.setValue(event.option['school.name']);
    this.providerEducation.controls['school'].setValue(event.option['school.name'], {emitEvent: false});
  }