Question

我需要将复选框添加到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>

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

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

Answer 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

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

1 个答案: