角度 2/4 倍数下拉 [英] angular 2/4 multiple drop down
问题描述
我正在尝试在我的 Angular 应用程序中开发两个下拉菜单.第一个是shop list
,另一个是godown list
.当我选择一家商店时,它会显示在数据上.但是当我选择仓库时,它不会更改数据.这里我有两个下拉框.
我认为我的问题出在我的打字稿文件(Onselect)中,因为这里我有 2 个下拉菜单(在 html 中我使用了 2 个 Onselect 函数,但在我的 ts 文件中只有一个函数).我只是 Angular 的初学者,因此如果您对此方法的缺点有任何评论,我将不胜感激:
ngOnInit() {this.Service.FetchPopulateOutlets().subscribe(outletsData => {让所有商店 = {店铺名称:'全部',店铺编号:0}this.outletDetails = [allShops, ...outletsData]}, 错误 =>{控制台错误(错误);this.statusMessage = "服务有问题,请稍后再试";});{this._enqService.FetchGodownPopulateOutlets().subscribe(GodownsData =>{让所有货品 = {GodownName: '全部',仓库 ID:0}this.GodownDetails = [allGodowns, ...GodownsData]},错误 =>{控制台错误(错误);this.statusMessage = "服务有问题,请稍后再试";});onSelect(shopid: number, godownid: number) {this._loginService.selectedshopid = shopid;this._loginService.selectedgodownid = godownid;}this._enqService.FetchItemDetails(shopid,godownid, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,错误 =>{控制台错误(错误);this.statusMessage = "服务有问题,请稍后再试";});
方法
但是如果我为第二个下拉列表创建一个单独的方法:如何显示数据这个方法?( this._enqService.FetchItemDetails(shopid,godownid, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,错误 =>{控制台错误(错误);this.statusMessage = "服务有问题.请稍后再试";)
HTML 文件:
<select class="formcontrol" name="outletDetail" (change)="onSelect($event.target.value)"><option value="0" disabled>选择店铺</option><option *ngFor="let outletDetail of outletDetails" value={{outletDetail.ShopID}}>{{outletDetail.ShopName}}</option></选择></span><跨度><select class="formcontrol" name="godowndata" (change)="onSelect($event.target.value)"><option value="0" disabled>选择货仓</option><option *ngFor="let godowndata of GodownDetails" value={{godowndata.GodownId}}>{{godowndata.GodownName}}</option></选择></span>
使用 [value]="outletDetail.ShopID"
而不是 value={{outletDetail.ShopID}}
代码>
component.ts
ngOnInit() {this.Service.FetchPopulateOutlets().subscribe(outletsData => {让所有商店 = {店铺名称:'全部',店铺编号:0}this.outletDetails = [allShops, ...outletsData]}, 错误 =>{控制台错误(错误);this.statusMessage = "服务有问题,请稍后再试";});this._enqService.FetchGodownPopulateOutlets().subscribe(GodownsData => {让所有货品 = {GodownName: '全部',仓库 ID:0}this.GodownDetails = [allGodowns, ...GodownsData]}, 错误 =>{控制台错误(错误);this.statusMessage = "服务有问题,请稍后再试";});}
<块引用>
component.html
<select class="formcontrol" name="outletDetail" (change)="onSelect($event.target.value)"><option value="0" disabled>选择店铺</option><option *ngFor="let outletDetail of outletDetails" [value]="outletDetail.ShopID">{{outletDetail.ShopName}}</option></选择></span><跨度><select class="formcontrol" name="godowndata" (change)="onSelect($event.target.value)"><option value="0" disabled>选择货仓</option><option *ngFor="let godowndata of GodownDetails" [value]="godowndata.GodownId">{{godowndata.GodownName}}</option></选择></span>
I am trying to develop two drop downs in my Angular application. The 1st one is shop list
and the other one is godown list
. When I select a shop it will show it on data.but when I select Godown it's not changing data. Here I have two drop down boxes.
I think my problem is in my typescript file(Onselect) because here I have 2 drop downs(in html I use 2 Onselect function but in my ts file have only one function). I'm just a beginner in Angular , so I would appreciate any comments on downsides of this method:
ngOnInit() {
this.Service.FetchPopulateOutlets().subscribe(outletsData => {
let allShops = {
ShopName: 'All',
ShopID: 0
}
this.outletDetails = [allShops, ...outletsData]
}, error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";
});
{
this._enqService.FetchGodownPopulateOutlets().subscribe(GodownsData =>
{
let allGodowns = {
GodownName: 'All',
GodownId: 0
}
this.GodownDetails = [allGodowns, ...GodownsData]
},
error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";
});
onSelect(shopid: number, godownid: number) {
this._loginService.selectedshopid = shopid;
this._loginService.selectedgodownid = godownid;
}
this._enqService.FetchItemDetails(shopid,godownid, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";
});
method
but if i create a separate method for the second dropdown:how to showing data for
this method?
( this._enqService.FetchItemDetails(shopid,godownid, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";)
HTML file:
<span>
<select class="formcontrol" name="outletDetail" (change)="onSelect($event.target.value)">
<option value="0" disabled>Select a Shop</option>
<option *ngFor="let outletDetail of outletDetails" value={{outletDetail.ShopID}}>{{outletDetail.ShopName}}</option>
</select>
</span>
<span>
<select class="formcontrol" name="godowndata" (change)="onSelect($event.target.value)">
<option value="0" disabled>Select a Godown</option>
<option *ngFor="let godowndata of GodownDetails" value={{godowndata.GodownId}}>{{godowndata.GodownName}}</option>
</select>
</span>
use [value]="outletDetail.ShopID"
instead of value={{outletDetail.ShopID}}
component.ts
ngOnInit() {
this.Service.FetchPopulateOutlets().subscribe(outletsData => {
let allShops = {
ShopName: 'All',
ShopID: 0
}
this.outletDetails = [allShops, ...outletsData]
}, error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";
});
this._enqService.FetchGodownPopulateOutlets().subscribe(GodownsData => {
let allGodowns = {
GodownName: 'All',
GodownId: 0
}
this.GodownDetails = [allGodowns, ...GodownsData]
}, error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";
});
}
component.html
<span>
<select class="formcontrol" name="outletDetail" (change)="onSelect($event.target.value)">
<option value="0" disabled>Select a Shop</option>
<option *ngFor="let outletDetail of outletDetails" [value]="outletDetail.ShopID">{{outletDetail.ShopName}}</option>
</select>
</span>
<span>
<select class="formcontrol" name="godowndata" (change)="onSelect($event.target.value)">
<option value="0" disabled>Select a Godown</option>
<option *ngFor="let godowndata of GodownDetails" [value]="godowndata.GodownId">{{godowndata.GodownName}}</option>
</select>
</span>
这篇关于角度 2/4 倍数下拉的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!