Question

是否有任何库有多列下拉选择角度？

我知道有一个angular-mulit-select库，这不是我需要的，它只能产生一列。我试过谷歌，但没找到任何图书馆。

Answer 1

使用ng-select2，您可以显示带有自定义模板的select。

Demo，带有自定义模板演示。

我在select2中显示表多列的代码

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Select2OptionData } from 'ng-select2';
import * as jQuery from 'jquery';

@Component({
  selector: 'app-job-preparing',
  templateUrl: './job-preparing.component.html',
  styleUrls: ['./job-preparing.component.css']
})
export class JobPreparingComponent implements OnInit {

  optionsSelect;
  ngOnInit(): void {
    //Get Mould list
    this.optionsSelect = {
      allowClear: true,
      width: "100%",
      templateResult: this.templateResultMoulds,
      templateSelection: this.templateSelectionMoulds

    }
    //End Get Mould

    //Get All Basic Information Like Plate List,Mould List,Powder List,...
    this.jobsService.fetchData().subscribe(result => {
      this.Mould4 = result.Moulds;
    },
      errorMessage => {
        this.isLoading = false;
        this.error = errorMessage;
      });
    //End All Basci Information
  }

  // Add Table Mould Detail To Select2 Result
  public templateResultMoulds(state: Select2OptionData) {
    console.log(state);
    return jQuery(`<table class='table table-bordered'>
      <tr>
        <td class='w-25'>${state['MOULD']}</td>
        <td class='w-25'>${state['SIZE_']}</td>
        <td class='w-25'>${state['INGOT_WEIGHT']}</td>
        <td class='w-25'>${state['NR_CASTED']}</td>
        <td class='w-25'>${state['NR_MAX_BE_CASTE']}</td>
      </tr>
    </table>`);
  }

  //Selected Value Format For Select2
  public templateSelectionMoulds  (state: Select2OptionData) {
    if (!state.id)
    return  '';

    return jQuery('<span>' + state['MOULD'] + '</span>');
  }

}

HTML代码

<ng-select2
[data]="Mould4"
class="form-control"
ngModel
required
name="Mould4"
[options]="optionsSelect">

</ng-select2>

角度多列下拉选择

1 个答案: