Html 如何在angular中提交复选框值

对于getCities（），我从api获取数据， 我刚刚在li tag中展示了，我在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>

选择城市


{{城市}


提交

使用模板驱动表单时，将

NgModel

添加到元素属性中

您还应该为每个

li

元素添加一个唯一的名称，以便能够区分以下值：

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

{{city.name}

---

您可以使用#选择器和viewchild引用DOM元素。 在.ts中，可以获得如下元素：

@ViewChild('yourSelector') anyName: Input

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);
    }
  }

然后调用元素上存在的任何函数。在.html中使用#选择器：

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

---

您需要一个数组，用于存储所有选定的城市，并在每次选中/取消选中某个城市的复选框时更新此数组

将代码更改为：

 <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>

看看Stackblitz就可以说明这一点