这就是我创建动态下拉列表的方式:
.html
<label> Move to </label>
<select [(ngModel)] = "mSelectedCategoryNameMoveTo"
(click) = "onMoveToSelected()"
[disabled] = "mflagDisableMoveTo" >
<option *ngFor = "let category of categories" [ngValue] = "category.name" >
{{category.name}}
</option>
</select>
这里的列表categories
来自.ts
文件。所有变量和函数都在相应的.ts
文件中定义。
的category
结构.ts
是如下所示:
export interface CategoryStructure
{
id: number
name: string
description: string
blogIds: number[]
}
在这里创建“子菜单”的方式是什么?
编辑2
另一个与菜单风格有关的现场演示:https :
//stackblitz.com/edit/angular-ivy-zrzfuy
编辑
反应式现场演示:https : //stackblitz.com/edit/angular-ivy-fhvvzs
这是如何执行此操作的示例。
文件.html
<select id="categoriesList" name="categoriesList" [ngModel]="categorySelected"
(ngModelChange)="setAnotherSelect(+$event)">
<option value="-1"></option>
<option *ngFor="let category of categories" value="{{ category.id }}">{{ category.name }}</option>
</select>
<select id="randomElementsList" name="randomElementsList" [ngModel]="randomElements" *ngIf="showRandomElements">
<option value="-1"></option>
<option *ngFor="let element of randomElements" value="{{ element.id }}">{{ element.name }}</option>
</select>
文件模型
export interface ICategoryStructure
{
id: number;
name: string;
description: string;
blogIds: number[];
}
文件component.ts
import { ICategoryStructure } from './myApp.model'
public categories: ICategoryStructure[] = [
{ id: 1, name: 'test1', description: 'description1', blogIds: [1, 2] },
{ id: 2, name: 'test2', description: 'description2', blogIds: [3, 4] },
{ id: 3, name: 'test3', description: 'description3', blogIds: [5, 6] },
];
public categorySelected: number = -1;
public randomElements: ICategoryStructure[] = [];
public randomElementSelected: number = -1;
public showRandomElements = false;
public setAnotherSelect(numberId) {
this.categorySelected = numberId;
this.showRandomElements = true;
this.randomElements = [];
switch (numberId) {
case 1:
this.randomElements = [
{ id: 4, name: 'test4', description: 'description4', blogIds: [7, 8] },
{ id: 5, name: 'test5', description: 'description5', blogIds: [9, 10] },
{ id: 6, name: 'test6', description: 'description6', blogIds: [11, 12] },
];
break;
case 2:
this.randomElements = [
{ id: 7, name: 'test7', description: 'description7', blogIds: [13, 14] },
{ id: 8, name: 'test8', description: 'description8', blogIds: [15, 16] },
{ id: 9, name: 'test9', description: 'description9', blogIds: [17, 18] },
];
break;
case 3:
this.randomElements = [
{ id: 10, name: 'test10', description: 'description10', blogIds: [19, 20] },
{ id: 11, name: 'test11', description: 'description11', blogIds: [21, 22] },
{ id: 12, name: 'test12', description: 'description12', blogIds: [23, 24] },
];
break;
default:
this.showRandomElements = false;
break;
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句