angular - 使用角度 4 根据第一个下拉选择更改第二个下拉选项
问题描述
组件.html
<select data-placeholder="All Categories" class="category" value="category.category.categoryName">
<option selected="selected" style="display:none">Select Category</option>
<option class="select" *ngFor="let category of categories" value="category">
{category.categoryName}}
</option>
</select>
<select data-placeholder="All Cities" class="services location" value="category.categoryName">
<option selected="selected" style="display:none">select type of services</option>
<option *ngFor="let category of selected.categoryServicemodel; let i =
index" value="category">{{category.serviceName}}
</option>
</select>
组件.ts
export class Component {
categories: any[];
services: any[];
cities: any[];
selected: any = {};
constructor() {
getAllCategories();
{
this.postService.getAllCategories()
.subscribe(data => {
this.categories = data.json();
console.log(this.categories);
});
}
getAllService();
{
this.postService.getAllServices()
.subscribe(res => {
this.services = res.json();
});
}
}
}
回复
[
{
"categoryId": 1,
"categoryName": "Painting",
"categoryDesc": "Painting of all types",
"categoryServicemodel": [
{
"serviceId": 1,
"serviceName": "Test12",
"serviceDesc": "test12",
"isActive": 1
},
{
"serviceId": 3,
"serviceName": "TESTINGEXAMPLE ",
"serviceDesc": "TESTINGEXAMPLE Details
Information
",
"isActive": 1
},
{
"serviceId": 12,
"serviceName": "New Painters",
"serviceDesc": "office paintings ",
"isActive": 2
},
{
"serviceId": 11,
"serviceName": "ABC Painters",
"serviceDesc": "painting of all types",
"isActive": 1
}
],
"active": 1
},
{
"categoryId": 2,
"categoryName": "string",
"categoryDesc": "string",
"categoryServicemodel": [
{
"serviceId": 2,
"serviceName": "Test15",
"serviceDesc": "test15",
"isActive": 1
}
],
"active": 0
},
{
"categoryId": 4,
"categoryName": "carpenter",
"categoryDesc": "Carpenter",
"categoryServicemodel": [
{
"serviceId": 5,
"serviceName": "Test Carpenter ",
"serviceDesc": "Test carpenter Description",
"isActive": 1
}
],
"active": 0
}
]
我的问题是当我为 ex 选择第一个类别名称时。绘画(在我的回复中)该类别下的所有服务名称都应该在第二个下拉列表中更改如果我选择第二个类别,那么该类别下的所有服务名称都应该在第二个下拉列表中可用
解决方案
我对你的代码做了一些小改动。
- 在您的 html 中,我将“值”替换为“[值]”。在此代码中,选项值始终是“类别”字符串。如果你使用括号,你将引用一个变量的内容
- 我创建了一个 buildService 方法来填充您的服务数组
- 最后,当我选择第一个组件时,我调用了 buildService
示例代码:https ://stackblitz.com/edit/service-category
组件.html
<select data-placeholder="All Categories" class="category" value="category.categoryName" [(ngModel)]="selected" (change)="buildServices($event)">
<option selected="selected" style="display:none">Select Category</option>
<option class="select" *ngFor="let category of categories" [value]="category.categoryId">
{{category.categoryName}}
</option>
</select>
<select data-placeholder="All Cities" class="services location" value="category.categoryName">
<option selected="selected" style="display:none">select type of services</option>
<option *ngFor="let service of services; let i =
index" value="service.serviceId">{{service.serviceName}}
</option>
</select>
组件.ts
public buildServices() {
this.services = [];
this.categories.forEach((category) => {
if (category.categoryId == this.selected) {
this.services = category.categoryServicemodel;
}
});
}
推荐阅读
- powershell - 这段代码有效吗?
- python - pythonnet dll目录访问被拒绝
- android - Job Scheduler vs Runnable:缺点?
- python - python中的循环,定时器和线程
- amazon-web-services - boto3 和 Go aws SDK 以不同的方式生成预签名 URL?
- heroku - 部署到 Heroku 时出现 Webpack 错误(npm 退出状态 2)
- c# - 如何使用 c# 在 Visual Studio 上创建实时视频录制程序?
- java - 抛出异常时返回 CompletableFuture 的方法执行两次
- swift - 如何更改整个应用程序的 UITableView 的颜色?
- json - 记录 JSON 正文有效,但 body.item 无效。给出未定义的