Angular 4 添加复选框以选择列表

Posted 2023-02-16

【中文标题】Angular 4 添加复选框以选择列表

【英文标题】：Angular 4 add checkboxes to select list

【发布时间】：2018-08-03 19:02:24

【问题描述】：

我需要在 Angular 4 中的现有选择列表中添加复选框

这是我的选择列表代码，它工作正常：

<select formControlName=selectItems" name="selectItems" class="form-control" 
 id="selectItems" (change)="selectItem($event)" required>
 <option value="">- Select -</option>
 <option *ngFor="let item of items; let i = index"> item</option>
</select>

我需要在选择列表中的每个项目前面添加一个复选框，以便用户可以进行多项选择。 尝试了几个选项，但到目前为止没有任何效果。

解决此任务的好方法是什么？

【问题讨论】：

如果这是一个复选框，它就不再是一个选择框了……你不能使用选项，而是输入……

据我所知，将复选框用作 select 或 option 的子项是无效的 html——需要使用 div 创建自定义组件

另一种方法是在select 元素上设置multiple 属性。它将元素显示为列表（不是下拉列表）并允许多选。

【参考方案1】：

你必须创建自定义组件才能做到这一点。

或者像这样使用有角度的材料：

HTML

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">topping</mat-option>
  </mat-select>
</mat-form-field>

TS

import Component from '@angular/core';
import FormControl from '@angular/forms';

/** @title Select with multiple selection */
@Component(
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
)
export class SelectMultipleExample 
  toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

示例：https://stackblitz.com/angular/egkdgobgevx?file=app%2Fselect-multiple-example.ts