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

您已经写了[（value）]无效的内容。您应该写（值）

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

并且您不需要在ngOnInit中初始化数组

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

只需将其写为全局变量

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

Answer 2

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

<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 = [];
}

当我将数据列表设为动态时，为什么它不起作用（角度7）？

2 个答案: