Как я могу сгенерировать опции выбора для всех моих ключей объектов 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