Как получить пользовательский ввод из , созданного с помощью *ngFor, в котором количество входных данных зависит от длины ответа json в angular 7

#angular #ngfor #angular-forms #dynamicform #angular-formbuilder

#angular #ngfor #угловые формы #dynamicform #angular-formbuilder

Вопрос:

Создайте динамический выпадающий ввод в html с помощью Angular 7 в зависимости от ответа JSON

Я получаю ответ json от серверной части, в зависимости от ответа я создал метки и выпадающий ввод в html, но теперь я хочу, чтобы пользователь установил некоторое значение для каждой метки, используя выпадающий ввод, и я хочу создать объект json для этого заданного ввода, чтобы передать его обратно в post call

 <tr *ngFor = "let storeData of storeDatas; let i = index" >
  <th scope="row"> {{storeData}} </th>
    <td> 
        <select class="form-control" >
            <option>Market</option>
            <option>Store ID</option>
            <option>Time Points</option>
            <option>Channel</option>
            <option>Sub Channel</option>
            <option>Category Sales</option>
            <option>Brand</option>
            <option>Subbrand</option>
            <option>Sales</option>
            <option>Items</option>
            <option>Unit</option>
            <option>Demographic</option> 
        </select>
    </td>
</tr>
  

Я хочу получить выпадающий ввод от пользователя для каждой метки и передать его как json для post-вызова.

Ответ №1:

Просто привяжите выбранное значение select к значению модели, например:

 <select [(ng-model)]="selectedName">
    <option value="storeID">Store ID</option>
    <option value="timePoints">Time Points</option>
</select>
  

Затем в вашем коде typescript вы можете просто создать post-вызов и отправить переменные вашего класса.

Комментарии:

1. Ошибка Uncaught: ошибки синтаксического анализа шаблона: не удается привязать к ‘ng-model’, поскольку это неизвестное свойство ‘select’. (» <th scope=»row»>{{StoreData}}</th> <td><select class=»form-control» [ERROR ->][(ng-model)]=»selectedName»> <option>Рынок</option>: ng:///ProjectManagementModule/ProjectDetailComponent.html@49:51

2. Это ngModel и не ng-model