Блог

Я новичок в angular 7 material design и работаю над несколькими выпадающими списками.

Итак, у меня всего 2 выпадающих списка, где для второго требуется идентификатор первого.

Это делается для того, чтобы список элементов во втором выпадающем списке сузился на основе ранее выбранного элемента. Я не уверен, как это сделать, и любая помощь очень ценится.

Обслуживание

    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>
  

Вы привязываете первый список к selectedMarket с помощью ngModel, чтобы

 this.service.getProducts(this.selectedMarket)
  

и установите this.products = [], чтобы очистить список перед вызовом для получения продуктов.

и вызвать его в ngModelChange

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

Я думаю, сначала вам нужно зафиксировать выбранное значение первого mat-select с помощью (изменить), например:

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

Затем вы должны объявить onSelectMakert (событие) в вашем компоненте, чтобы получить выбранное значение первого mat-select . После того, как вы объявили функцию, давайте загрузим второй select.

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