在 Angular 8 中创建具有自定义多选下拉列表的动态行
1.92/5 (4投票s)
在本技巧中，您将学习如何在 Angular 8 中创建带有自定义多选下拉列表的动态行。
引言
在本技巧中，我们将学习如何使用 Angular 8 创建动态行和自定义多选下拉列表。
用于 Web 应用程序的 Angular 多选下拉组件易于集成和使用。 它可以绑定到任何自定义数据源。
它将如何工作？
Angular 中已经可以使用多下拉复选框，名为 ng-multiselect-dropdown，但这里我们没有使用它。 我们正在创建自己的，另外我们还将提供仅在 checkbox 中选择两个值的功能。 这意味着，当我们尝试选择两个以上的值时，它将删除第一个值并选择第三个。
必备组件
- 具备 Angular 的基础知识
- 必须安装 Visual Studio Code
- 必须安装 Angular CLI
- 必须安装 Node JS
Using the Code
步骤 1
让我们使用以下 npm 命令创建一个 Angular 项目
ng new multiSelectCheckbox
第二步
在 Visual Studio Code 中打开新创建的项目，并在该项目中安装 bootstrap。
现在，打开 *styles.css* 文件并添加 Bootstrap 文件引用。 要在 *styles.css* 文件中添加引用，请添加此行
npm install bootstrap --save
步骤 3
现在，让我们使用以下命令创建一个新组件
ng g c home
步骤 4
现在创建一个新类，要创建类，请使用以下命令
ng generate class blankRow
现在，打开该类并添加以下代码
export class BlankRow {
RollNo:number;
Name:string;
Medium:any;
Class:any;
Section:any;
Books:any=[];
SelectedBooks:any=[];
Subject=[];
SelectedSubject=[];
}
步骤 5
现在，打开 home *component.ts* 文件，并在该文件中添加以下代码
import { Component,OnInit } from '@angular/core';
import { BlankRow } from '../models/blankRow';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
blankRowArray: Array < BlankRow > = [];
blankRowData = new BlankRow();
hideMultiSelectDropdownAll: boolean[] = [];
hideMultiSelectDropdown: boolean[] = [];
hideMultiSelectedSubjectDropdown: boolean[] = [];
hideMultiSelectedSubjectDropdownAll: boolean[] = [];
tempData = [];
savedSubjects = [];
Books = [];
Subject = [];
constructor() {}
ngOnInit() {
this.Subject = [{
value: "English",
IsChecked: false
}, {
value: "History",
IsChecked: false
}, {
value: "Geography",
IsChecked: false
}, {
value: "Hindi",
IsChecked: false
}, {
value: "Marathi",
IsChecked: false
}, {
value: "Civics",
IsChecked: false
}, {
value: "Science",
IsChecked: false
}, {
value: "Mathematics",
IsChecked: false
}];
this.Books = [{
value: "CBSE Class 10 English Literature Reader Book",
IsChecked: false
}, {
value: "CBSE Class 10 English Book",
IsChecked: false
}, {
value: "CBSE Class 10th Maths Book",
IsChecked: false
}, {
value: "CBSE Class 10th Hindi Book",
IsChecked: false
}, {
value: "CBSE Class 10 Science Book",
IsChecked: false
}, {
value: "Class 10 CBSE Geography Book",
IsChecked: false
}, {
value: "Class 10th Economics Book",
IsChecked: false
}, {
value: "CBSE Class 10 Sanskrit Book",
IsChecked: false
}];
}
addBlankRow() {
const blankRowData = new BlankRow();
blankRowData.RollNo = 0,
blankRowData.Name = '',
blankRowData.Medium = 0,
blankRowData.Class = 0,
blankRowData.Section = 0,
blankRowData.Books = [],
blankRowData.Subject = [],
blankRowData.SelectedSubject = [{
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}],
blankRowData.SelectedBooks = [{
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}],
this.blankRowArray.push(blankRowData)
}
openMultiSelectDD(i) {
for (var x = 0; x < this.blankRowArray.length; x++) {
this.hideMultiSelectDropdownAll[x] = false;
this.hideMultiSelectedSubjectDropdownAll[x] = false;
this.hideMultiSelectedSubjectDropdown[x] = false;
}
this.hideMultiSelectDropdownAll[i] = true;
this.hideMultiSelectDropdown[i] = !this.hideMultiSelectDropdown[i];
}
openMultiSelectDDForSubject(i) {
for (var x = 0; x < this.blankRowArray.length; x++) {
this.hideMultiSelectedSubjectDropdownAll[x] = false;
this.hideMultiSelectDropdownAll[x] = false;
this.hideMultiSelectDropdown[x] = false;
}
this.hideMultiSelectedSubjectDropdownAll[i] = true;
this.hideMultiSelectedSubjectDropdown[i] = !this.hideMultiSelectedSubjectDropdown[i];
}
//MultiSelect DropDown For Books
booksChecked(list: any, i, x, isChecked: boolean) {
let selectedBooks = list.value;
if (isChecked) {
this.blankRowArray[i].Books.push(selectedBooks);
this.blankRowArray[i].SelectedBooks[x].IsChecked = true;
} else {
this.blankRowArray[i].Books =
this.blankRowArray[i].Books.filter(obj => obj !== selectedBooks);
this.blankRowArray[i].SelectedBooks[x].IsChecked = false;
}
}
//On Subject Checked
onSubjectChecked(list: any, i, x, isChecked: boolean) {
let selectedSubject = list.value;
if (this.blankRowArray[i].Subject.length < 2) {
if (isChecked) {
if (this.blankRowArray[i].Subject.length == 0) {
this.tempData = [];
}
if (this.tempData.length < 2) {
this.tempData.push(x);
}
if (this.tempData.length == 2) {
let saveSub = this.tempData.join(',');
this.savedSubjects[i] = saveSub;
console.log(this.savedSubjects[i]);
}
this.blankRowArray[i].Subject.push(selectedSubject);
this.blankRowArray[i].SelectedSubject[x].IsChecked = true;
this.Subject[x].IsChecked = true;
} else {
this.tempData.filter(obj => obj !== x);
this.blankRowArray[i].Subject =
this.blankRowArray[i].Subject.filter(obj => obj !== selectedSubject)
this.blankRowArray[i].SelectedSubject[x].IsChecked = false;
}
} else {
if (isChecked) {
this.blankRowArray[i].Subject[0] = this.blankRowArray[i].Subject[1];
this.blankRowArray[i].SelectedSubject[x].IsChecked = true;
let saveSub0 = this.savedSubjects[i].split(',')[0] ?
this.savedSubjects[i].split(',')[0] : this.tempData[0];
let saveSub1 = this.savedSubjects[i].split(',')[1] ?
this.savedSubjects[i].split(',')[1] : this.tempData[1];
var temp = saveSub0;
this.tempData[0] = saveSub1;
this.tempData[1] = x;
this.blankRowArray[i].SelectedSubject[temp].IsChecked = false;
this.Subject[x].IsChecked = true;
this.blankRowArray[i].Subject[1] = selectedSubject;
this.savedSubjects[i] = this.tempData.join(',');
} else {
var temp = this.tempData.find(a => a == x);
this.tempData = [];
this.tempData[0] = temp;
this.blankRowArray[i].Subject =
this.blankRowArray[i].Subject.filter(obj => obj !== selectedSubject)
this.blankRowArray[i].SelectedSubject[x].IsChecked = false;
}
}
}
deleteRow(index) {
this.blankRowArray.splice(index, 1);
}
}
deleteRow 方法用于删除创建的行。
deleteRow(index) {
this.blankRowArray.splice(index, 1);
}
addBlankRow() {
const blankRowData = new BlankRow();
blankRowData.RollNo = 0,
blankRowData.Name = '',
blankRowData.Medium = 0,
blankRowData.Class = 0,
blankRowData.Section = 0,
blankRowData.Books = [],
blankRowData.Subject = [],
blankRowData.SelectedSubject = [{
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}],
blankRowData.SelectedBooks = [{
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}],
this.blankRowArray.push(blankRowData)
}
addBlankRow 方法用于在单击“添加新行”按钮时添加一个新的空白行。
openMultiSelectDD(i) {
for (var x = 0; x < this.blankRowArray.length;x++) {
this.hideMultiSelectDropdownAll[x] = false;
this.hideMultiSelectedSubjectDropdownAll[x] = false;
this.hideMultiSelectedSubjectDropdown[x] = false;
}
this.hideMultiSelectDropdownAll[i] = true;
this.hideMultiSelectDropdown[i] = !this.hideMultiSelectDropdown[i];
}
openMultiSelectDD 方法用于在单击时打开下拉列表（与书籍相关）。 我在这里使用了 "for" 循环，以关闭所有特定的下拉列表并仅打开选定的下拉列表。
openMultiSelectDDForSubject(i) {
for (var x = 0; x < this.blankRowArray.length; x++) {
this.hideMultiSelectedSubjectDropdownAll[x] = false;
this.hideMultiSelectDropdownAll[x] = false;
this.hideMultiSelectDropdown[x] = false;
}
this.hideMultiSelectedSubjectDropdownAll[i] = true;
this.hideMultiSelectedSubjectDropdown[i] = !this.hideMultiSelectedSubjectDropdown[i];
}
openMultiSelectDDForSubject 方法用于在单击时打开下拉列表（与主题相关）。 我在这里使用了 "for" 循环以关闭所有特定的下拉列表，并仅打开选定的下拉列表。
//MultiSelect DropDown For Books
booksChecked(list: any, i, x, isChecked: boolean) {
let selectedBooks = list.value;
if (isChecked) {
this.blankRowArray[i].Books.push(selectedBooks);
this.blankRowArray[i].SelectedBooks[x].IsChecked = true;
} else {
this.blankRowArray[i].Books =
this.blankRowArray[i].Books.filter(obj => obj !== selectedBooks);
this.blankRowArray[i].SelectedBooks[x].IsChecked = false;
}
}
在上面的代码中，我使用了一些参数，我将逐一解释。
list：它存储从checkbox中选择的值。i：它存储当前空白行的索引值。x：它存储当前的checkbox索引值。isChecked：它存储checkbox的布尔值（对于选中的值为 'true'，对于未选中的值为 'false'）。
如果已 选中，则它将推入一个数组并将 SelectedBooks.Ischecked 赋值为 true。 它可以选中或取消选中所有 checkbox。
//On Subject Checked
onSubjectChecked(list: any, i, x, isChecked: boolean) {
let selectedSubject = list.value;
if (this.blankRowArray[i].Subject.length < 2) {
if (isChecked) {
if (this.blankRowArray[i].Subject.length == 0) {
this.tempData = [];
}
if (this.tempData.length < 2) {
this.tempData.push(x);
}
if (this.tempData.length == 2) {
let saveSub = this.tempData.join(',');
this.savedSubjects[i] = saveSub;
console.log(this.savedSubjects[i]);
}
this.blankRowArray[i].Subject.push(selectedSubject);
this.blankRowArray[i].SelectedSubject[x].IsChecked = true;
this.Subject[x].IsChecked = true;
} else {
this.tempData.filter(obj => obj !== x);
this.blankRowArray[i].Subject =
this.blankRowArray[i].Subject.filter(obj => obj !== selectedSubject)
this.blankRowArray[i].SelectedSubject[x].IsChecked = false;
}
} else {
if (isChecked) {
this.blankRowArray[i].Subject[0] = this.blankRowArray[i].Subject[1];
this.blankRowArray[i].SelectedSubject[x].IsChecked = true;
let saveSub0 = this.savedSubjects[i].split(',')[0] ?
this.savedSubjects[i].split(',')[0] : this.tempData[0];
let saveSub1 = this.savedSubjects[i].split(',')[1] ?
this.savedSubjects[i].split(',')[1] : this.tempData[1];
var temp = saveSub0;
this.tempData[0] = saveSub1;
this.tempData[1] = x;
this.blankRowArray[i].SelectedSubject[temp].IsChecked = false;
this.Subject[x].IsChecked = true;
this.blankRowArray[i].Subject[1] = selectedSubject;
this.savedSubjects[i] = this.tempData.join(',');
} else {
var temp = this.tempData.find(a => a == x);
this.tempData = [];
this.tempData[0] = temp;
this.blankRowArray[i].Subject =
this.blankRowArray[i].Subject.filter(obj => obj !== selectedSubject)
this.blankRowArray[i].SelectedSubject[x].IsChecked = false;
}
}
}
在此方法中，我们最多只能选中两个值。 如果我们选择了第三个值，则第一个值将被第三个值替换，依此类推。
步骤 6
现在，打开 *home.component.html* 文件，并在该文件中添加以下代码
<div> Add Blank Row </div>
<p> </p>
<div class="col-12 col-md-12">
<div class="card">
<div class="card-body">
<div class="table-responsive cnstr-record">
<table class="table table-bordered">
<tbody>
<tr>
<td> </td>
<th width="30">Roll No </th>
<th width="100">Student Name </th>
<th width="50">Medium </th>
<th width="70">Class </th>
<th width="50">Section </th>
<th width="80">Books </th>
<th width="60">Subject </th>
<th width="50">Delete Row </th>
</tr>
<tr>
<td>
--Choose-- English Hindi Marathi
--Choose-- Fifth Sixth Seventh Eight Ninth Tenth
--Choose-- Section A Section B Section C Section D Section E
<div style="width: 329px !important">
<div class="body">
<div> {{bookList.value}}
<div style="width: 162px !important">
<div class="body">
<div> {{subjectList.value}}
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td align="center"> Delete Row
<p> </p>
步骤 7
现在，打开 *home.component.css* 文件，并在该文件中添加以下代码。
<select>
.tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #b7b086;
background-color: white;
color: #000!important;
padding: 5px 15px 5px 10px;
opacity: 1;
width: 350px;
}
</select>
步骤 8
现在，打开 *app.module.ts* 文件，并在该文件中添加以下代码
<select>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
],
imports: [
BrowserModule,
RouterModule,
FormsModule,
AppRoutingModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
</select>
步骤 9
现在，使用 'npm start' 或 'ng serve' 命令运行该项目。
单击 添加空白行 按钮，它会创建一个新行。
第 10 步
现在，单击主题 textbox。
第 11 步
结论
在本文中，我讨论了如何在 Angular 8 应用程序中创建动态行和自定义多选下拉列表。
我只是一个初学者，渴望学习新事物，不仅与技术相关，而且与所有方面相关。
“永远不要停止学习，因为生活永不停歇地教导” .....by Gautam Buddha（高塔姆·佛陀）。
请提供您对这篇文章的宝贵反馈/评论/问题。 如果您喜欢并理解这篇文章以及我如何改进它，请告诉我。
历史
- 2020 年 1 月 3 日：初始版本