为什么当我将其动态化时数据列表不起作用(Angular 7)

Question

我在.ts文件中创建了一个函数，该函数允许更新用于创建数据列表选项的数组(默认为空(。

当我检查 HTML 代码时，我在数据列表中看到了选项，但它们没有显示在 GUI 中

<input list='id-RPG' type="text" pInputText class="inputTextStyle" [(ngModel)]="MyModal" (input)="searchList($event.target.value)"/>
<datalist id='id-RPG'>
 <option *ngFor="let element of array" [(value)]="element ">{{element }}</option>
</datalist>

ngOnInit(){
this.array = [];
}
searchList(){
//Rest Here
this.array = ["aaa","aab","aac","aad"]
}

不显示错误消息

Answer 1

你已经写了[(值(]不起作用的东西。你应该写(值(

<option *ngFor="let element of array" (value)="element ">

而且你不需要在ngOnInit中初始化数组

ngOnInit(){
  this.array = [];
}

只需将其编写为全局变量即可

array: Array<string> = [];
ngOnInit(){}

Answer 2

我认为不可能实时更新数据列表，每次您必须单击外部以获取新数据时......我使用了旧方法，我认为这是正确的方法。

<div class="suggestedList" *ngIf="array.length > 0">
 <ul class="UlSugList" *ngFor="let element of array">
  <li class="LiSugList">
   <a (click)="select(element)">{{element}}</a>
  </li>
 </ul>
</div>

select(RPG) {
    this.MyModal = RPG;
    this.array = [];
}