Question

我正在尝试在Angular应用程序中开发两个下拉菜单。第一个是商店清单，另一个是货仓清单。当我选择商店时，它将在数据和所选商店列表上显示它，但是当我选择货仓时，它并不会基于所选商店。

在这里，我有两个下拉框。这里有很多问题，但是我哪里都找不到正确的答案。

TypeScript文件：

ngOnInit() {
  this._enqService.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) {
    this._enqService.FetchItemDetails(shopid, this.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="form-control" 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="form-control" 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>

我认为问题出在Onselect上，因为在这里我使用两个参数，而在TypeScript中我仅使用一种方法。

Answer 1

使用 ngModelChange 和 ngModel

  <select class="form-control" [(ngModel)]="selected" name="godowndata" (ngModelchange)="onSelect(selected)">

Answer 2

您可以使用 change 事件

<select [(ngModel)]="selected" name="status" placeholder="select" (change)="onOptionsSelected()">
        <option *ngFor="let sta of accTypes" [ngValue]="sta">{{sta.name}}</option>
</select>

stackblitz example

角度2/4 Onselect无法获得

2 个答案: