Угловой 7 заполнить выпадающий список по ранее выбранному идентификатору элемента - PullRequest
Новая
       25

Угловой 7 заполнить выпадающий список по ранее выбранному идентификатору элемента

0 голосов
/ 12 марта 2019

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

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

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

service 

   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>

Ответы [ 2 ]

0 голосов
/ 12 марта 2019

Я думаю, вам сначала нужно захватить выбранное значение первого 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)
    }
0 голосов
/ 12 марта 2019

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

this.service.getProducts(this.selectedMarket)

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

ивызов по ngModelChange 

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