Question

我需要根据用户选择多个选定的值来选择angular / typescript中的多选/下拉列表

<select multiple>
  <option value="Value1">Value1</option>
  <option value="Value2">Value2</option>
  <option value="Value3">Value3</option>
</select>

需要一组选定的值我没有得到这个价值。

Answer 1

您应该尝试使用像Angular Material这样的库：

HTML：

<mat-form-field>
  <mat-select placeholder="Items" [formControl]="items" multiple>
    <mat-option *ngFor="let item of itemList" [value]="item">{{item}}</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 {
  items = new FormControl();

  itemList = ['item 1', 'item 2', 'item 3', 'item 4', 'item 5', 'item 6'];
}

来源：Angular Material Docs

Answer 2

HTML

<div class="multiselect" tabindex="0" (blur)="blurDropdown()">
    <div class="selectBox" (click)="toggleDropdown()">
         <select>
          <option>REASON_LIST</option>
        
           </select>
            <div class="overSelect"></div>
        </div>
        <div id="checkboxes" *ngIf="isExpanded  && reasonList.length>0">
            <div class="multiselect-heading-block"><span
                    class="caption">SELECTED</span>
                <span class="clear"
                    (click)="uncheckAll(reasonList)">CLEAR</span>
            </div>
            <ng-container *ngFor="let item of reasonList;let x = index;">
                <div class="reasonlist" *ngIf="item.checked"
                    (click)="selectReason(reasonList,x)">
                    <input type="checkbox" [checked]="item.checked" />
                    <span>{{item.reason}}</span>
                </div>
            </ng-container>
            <hr>
            <ng-container *ngFor="let item of reasonList;let i = index;">
                <div class="reasonlist" (click)="selectReason(reasonList,i)">
                    <span><input type="checkbox" id="item{{item.id}}" name="tagOptions"
                            [checked]="item.checked" />{{item.reason}}</span>
                </div>
            </ng-container>
        </div>
    </div>

TYPESCRIPT

toggleDropdown() {
  this.isExpanded = !this.isExpanded;
}

blurDropdown() {
  if(this.isExpanded)
  this.isExpanded = !this.isExpanded;
}

uncheckAll(reasonList) {
  reasonList.forEach(element => {
    if(element.checked){
      element.checked=false;
    }
  });
}
selectReason(reasonList, i) {
  if (reasonList) {
    this.reasonList[i].checked = !this.reasonList[i].checked;
  }
}

CSS

.multiselect {
    width: 200px;
    display: inline-block
}

.caption {
    opacity: .56;
    font-size: 12px;
    font-style: normal;
    font-stretch: normal;
    line-height: 16px;
    letter-spacing: .4px;
}

.clear {
    float: right;
    padding: 4px;
    border: 1px solid;
    font-size: 12px;
    margin-right: 10px;
    cursor: pointer;
}

.selectBox {
    position: relative;
}

.selectBox select {
    width: 100%;
    font-weight: bold;
}

.multiselect-heading-block {
    padding: 1px 0 2px 20px;
    margin-top: 1px;
    clear: both;
    overflow: hidden;
}

.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#checkboxes {
    border: 1px #dadada solid;
}

.reasonlist {
    margin: 6px;
}

#checkboxes .reasonlist:hover {
    background-color: #1e90ff;
    cursor: pointer;
    margin: 6px;
}

Angular 2/4从下拉列表或多选列表框中获取多个选定项目

2 个答案: