如何为我的所有 JSON 对象键生成选择选项？

Question

所以我有一个输入字段，它从本地存储的 json 文件中获取数据。当“在现场搜索”时，数据成为用户选择的选项。而不是像我正在做的那样一个一个地写出 100 多个结果。有没有更快更好的方法来做到这一点？我还在控制台“无法读取未定义的属性'1'”中出现一个小错误，但我的方法“有效”，但它是错误的代码。

<input type="text" name="search" id="search" list="datalist2"/>
<datalist id ="datalist2">
    <option  *ngIf="town_list">
    <option value="{{town_list[1].bc}}">
    <option value="{{town_list[2].bc}}">
    <option value="{{town_list[3].bc}}">

</datalist> 

Answer 1

使用*ngIf检查数组是否良好，但如果要迭代它，则需要*ngFor

<input type="text" name="search" id="search" list="datalist2"/>
<datalist id ="datalist2" *ngIf="town_list">
    <option *ngFor="let town of town_list">{{town.bc}} </option>
</datalist>

Answer 2

只需使用*ngFor。这样您就可以遍历数组并显示其中的每个项目。

<option *ngFor="let town of town_list" ngValue="town.bc">{{town.bc}}</option>

https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor