当我手动单击链接到动态数据列表的输入时，将显示值当我以编程方式单击时，数据列表值不显示

问题描述

我编写了一个角度应用程序并使用了动态数据列表

<input id="inputCodePostalId" type="text"  (keyup)="findPostalCode($event)" placeholder="Code Postal" formControlName="codePostal" list="codePostalId" />
    <datalist id="codePostalId">
        <option *ngFor="let code of postalCodeList" [value]="code">{{code}}</option>
    </datalist>

数据列表具有来自请求的值

  findPostalCode(event: any) {
    let text = event.target.value;
    if (event.which != 16 && text != null && text.length > 2) {
      this.postalCodeList = [];
      this.produitImmobilierService.getPostalCodes(text).subscribe( 
            result => {
                            this.postalCodeList = result; 
                            setTimeout( function () {
                                var elem = document.getElementById("inputCodePostalId");
                                elem.click(); 
                             },500)
                      }
       );
    }
  }

例如，当我在输入中输入595时，就发出了请求，此后，当我手动单击输入时，出现了数据列表值，但是当我以编程方式单击上面的内容时（请参见setTimeout函数），数据列表值不会出现

更新

我在输入中添加了一个点击监听器

<input id="inputCodePostalId" type="text" (click)="method1();"................
and 
  method1() {
    console.log('ca passe CLICK');
  }

我也尝试过

  findPostalCode(event: any) {
    let text = event.target.value;
    if (event.which != 16 && text != null && text.length > 2) {
      this.postalCodeList = [];
      const event1 = new Event('click');
      const element = document.getElementById("inputCodePostalId");
      this.produitImmobilierService.getPostalCodes(text).subscribe( 
                 result => {this.postalCodeList = result; 
                 setTimeout( function () {element.dispatchEvent(event1); },500)});
    }
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）