Показывать поле ввода и сохранять значение при нажатии каждого флажка отдельно

#javascript #angular

Вопрос:

Я показываю разные места на переднем конце. При проверке каждого местоположения пользователю предлагается добавить количество запасов, которое он хочет добавить в этом конкретном местоположении.

Теперь я не уверен, как добиться этого в angular. Может кто-нибудь, пожалуйста, направить меня или помочь мне?

 <div class="form-group">
  <h4>Markets to stock and fulfill product</h4>

   <div *ngFor="let location of  (allLocations | async)" class="form-check">
     <input class="form-check-input" type="checkbox" name="myCheckbox" value="{{location}}" id="checkboxCity_">
      <label class="form-check-label">
         {{location}}
       </label>
                    
    <div class="row">
     <div id="stockInput_" style="display: none;">
      <label>Enter Quantity of Stock in this Market (In Units)</label>
       <div class="col-md-6">
         <input placeholder="Stock (In Units)" class="form-control" name="mkt[]" id="stock_">
       </div>
      </div>
     </div>
    </div>
</div>
 

Я создал его ранее в основном Javascript, и это было то, что я создавал.

 {"Houston":"30","New York":"10","Los Angeles":null}
 

Так можно ли достичь этого и в Angular?

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

1. Непонятно, чего именно вы хотите. Можете ли вы показать ввод и вывод вашего кода?

2. paste.pics/DICC3 Я добавил скриншот интерфейса здесь, «Введите количество акций на этом рынке» появляется только после нажатия этого флажка. И как только пользователь добавит количество, я хочу, чтобы он создал массив, подобный этому {«Хьюстон»:»30″,»Нью-Йорк»:»10″,»Лос-Анджелес»:ноль}

3. можете ли вы создать рабочий образец stackblitz? трудно решить вашу проблему без какого-либо кода. вы вводите свой код stackblitz.com/edit/ng-for и отправить ссылку