angular - 角度 2/4 倍数下拉
问题描述
我正在尝试在我的 Angular 应用程序中开发两个下拉菜单。第一个是shop list
,另一个是godown list
。当我选择一家商店时,它会在数据上显示它。但是当我选择 Godown 时,它不会更改数据。这里我有两个下拉框。
我认为我的问题出在我的打字稿文件(Onselect)中,因为这里我有 2 个下拉菜单(在 html 中我使用 2 个 Onselect 函数,但在我的 ts 文件中只有一个函数)。我只是 Angular 的初学者,所以我将不胜感激有关此方法缺点的任何评论:
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";
});
方法
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 文件:
<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>
解决方案
使用[value]="outletDetail.ShopID"
而不是 value={{outletDetail.ShopID}}
组件.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";
});
}
组件.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>
推荐阅读
- javascript - 如何在 JS 中创建等待直到响应返回系统?
- mysql - 数据库 webSocket 卡住了
- java - Eclipse + m2e + junit5 - 已经可能了吗?
- byobu - Byobu 的 F2 键已经没有效果了,但是 Ctrl+F2 就可以了
- ssl - Cloudflare SSL 不适用于 Elixir/Phoenix 后端
- arrays - 我的结构数组只显示最后一个输入 - c++
- angular - 将 FormGroup 放入类的最佳方法
- r - 与R中的MatchIt 3:1匹配,匹配控件数不等于3倍case数
- mongodb - MongoDB Java聚合函数的光标错误
- javascript - Redux Form Wizard,按钮发送json字段数据?