0

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

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

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

4

1 回答 1

0

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

或者只使用这样的角材料：

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

于 2018-08-03T23:05:16.940 回答