Question

我是Angle 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)

并设置this.products = []以在致电之前获得产品的列表。

，然后调用ngModelChange

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

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

1 个答案: