как отправить значение флажка в угловых

для getCities () я получаю данные из API, которые я только что показал в теге li, я в deliama, как передать значение флажка,

когда клиент проверит несколько городов

 <form #hlForm="ngForm" (ngSubmit)="filterData(hlForm)">
   <span>
    <button type="submit" class="btn-blue" (click)="getCities()">Select City</button>
    <ul class="location-filter" *ngIf="cityList">
     <li *ngFor="let city of cityList">
       {{city}} <input type="checkbox" name="selectCity">
     </li>
   </ul>
  </span>
 <button type="submit" value="submit">submit</button>
</form>

Всего 3 ответа


При использовании шаблонно-управляемых форм добавьте NgModel к атрибутам элемента.

Вы также должны добавить уникальное имя для каждого элемента li чтобы иметь возможность различать значения:

 <li *ngFor="let city of cityList">
   {{city.name}} <input type="checkbox" [name]="city.name" ngModel>
 </li>

Stackblitz демо


Вам нужно иметь массив, в котором вы можете хранить все выбранные города, и обновлять этот массив каждый раз, когда флажок для города отмечен / снят.

Измените свой код на:

 <form #hlForm="ngForm" (ngSubmit)="filterData(hlForm)">
   <span>
    <button type="submit" class="btn-blue" (click)="getCities()">Select City</button>
    <ul class="location-filter" *ngIf="cityList">
     <li *ngFor="let city of cityList">
       {{city}} <input value={{city}} (change)="onCheckChange($event)" type="checkbox" name="selectCity">
     </li>
   </ul>
  </span>
 <button type="submit" value="submit">submit</button>
</form>

И ваш метод onCheckChange будет выглядеть так:

onCheckChange(event: any)
  {
    console.log(event.target.value)
    if (event.target.checked)
    {
      this.selectedCities.push(event.target.value);
    }
    else
    {
      this.selectedCities = this.selectedCities.filter(x => x !== event.target.value);
    }
  }

Взгляните на этот Stackblitz, иллюстрирующий это.


Вы можете ссылаться на элемент DOM, используя селектор # и viewchild. В вашем .ts вы можете получить такой элемент:

@ViewChild('yourSelector') anyName: Input

а затем вызвать любую функцию, которая существует на элементе. и в вашем .html вы используете селектор #:

<input #yourSelector type="checkbox"....