Angular 7按先前选择的项目ID填充下拉列表

Question

我是角度7材料设计的新手，我正在开发一个多下拉列表。

所以我总共有2个下拉列表，其中第二个需要第一个的id。

这样，第二个下拉列表中的项目列表将根据先前选择的项目缩小。我不知道如何去做这件事，非常感谢任何帮助。

服务

   getAllMarkets(){
   return this.http.get(this.url + 'allMarkets')
  }

   getProducts(id: number){
   return this.http.get(this.url + 'products')
  }

.TS

markets;
products;

ngOnInit() {
this.getMarkets();
this.getFilteredProducts();
}

getMarkets() {
return this.service.getAllMarkets().subscribe(res => {
this.markets = res;
});
}

getFilteredProducts() {
return this.service.getProducts(Not sure how to pass id).subscribe(res => {
this.products = res;
});
}

html的

<mat-form-field>
      <mat-select placeholder="Markets" [(ngModel)]="selectedMarket" name="market">
        <mat-option *ngFor="let market of markets" [value]="market.id" >
          {{market.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Products" [(ngModel)]="selectedProducts" name ="product">
          <mat-option *ngFor="let product of products" [value]="product.id"
          >
            {{product.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>

Answer 1

您正在使用ngModel将第一个列表绑定到selectedMarket

this.service.getProducts(this.selectedMarket)

并在调用get产品之前设置this.products = []清除列表。

并在ngModelChange上调用它

<mat-select placeholder="Markets" [(ngModel)]="selectedMarket" name="market" (ngModelChange)="getFilteredProducts()">

Answer 2

我认为你首先需要捕获第一个mat-select的选定值（更改），如：

<mat-select placeholder="Markets" [(ngModel)]="selectedMarket" name="market" (change)="onSelectMakert($event.value)">

然后，您应该在组件中声明onSelectMakert（事件），以获取第一个mat-select的选定值。声明函数后，让我们加载第二个选择。

onSelectMakert(data) {
        this.products = // charge your products base on the "data" (aka. id)
    }