角度2/4倍数下拉 [英] angular 2/4 multiple drop down

问题描述

我正在尝试在Angular应用程序中开发两个下拉菜单。第一个是商店清单，另一个是 godown清单。当我选择商店时，它将在数据上显示。但是当我选择货仓时，它不会更改数据。这里我有两个下拉框。

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.

我认为我的问题出在我的打字稿文件中（Onselect），因为这里我有2个下拉菜单（在html中，我使用了2个Onselect函数但在我的ts文件中只有一个功能）。
我只是Angular的初学者，所以我很乐意对此方法的缺点做任何评论：

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";
                    });

方法

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}}

component.ts

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

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屋！