Как отображать данные из API в выпадающем списке 2 в зависимости от того, что выбрано в выпадающем списке 1 - PullRequest
Новая
       9

Как отображать данные из API в выпадающем списке 2 в зависимости от того, что выбрано в выпадающем списке 1

0 голосов
/ 12 декабря 2018

У меня есть два выпадающих.В обоих случаях данные поступают из API.Исходя из того, что выбрано в первом раскрывающемся списке, данные будут отображаться в раскрывающемся списке 2.

sidebar.component.html : 

<div class="dropdown  ml-auto">
    <select (change)=selectedHandlerProjectName($event) class="btn btn-secondary dropdown-toggle" style="margin-left: -10px;border-left-width:15px;padding-left:11px;padding-right: 14px;margin-right: 12px;border-right-width: 12px">
        <option value = "default">Select project</option>
        <option *ngFor = "let project of selectProject" value = {{projectName}}>{{project.projectName}}</option>
    </select>
</div>

<div class="dropdown  m3-auto">
    <select (change)=selectedHandlerProjectVariantName($event) class="btn btn-secondary dropdown-toggle">
        <option value = "default">Select variant project</option> 
        <option *ngFor = "let project of selectVariantProject" value = {{projectVariantName}}>{{project.projectVariantName}}</option>  
     </select>
</div>

sidebar.component.ts : 

export class SidebarComponent implements OnInit {

  selectProject : Project;
  selectVariantProject: ProjectVariant;

  constructor(private projectService: ProjectService) { }


  getSelectedProject(): void{  
    this.projectService.getProjects()
      .subscribe(selectProject => this.selectProject= selectProject);
  }

  getSelectedVariantProject(id: number): void{
     this.projectService.getProjectVariant(id)
      .subscribe(selectVariantProject => this.selectVariantProject = selectVariantProject);
  }

  //methods to get dropdown values
  dropDownProjectName: string = '';
  selectedHandlerProjectName(event : any)
  {
    if(event.target.value != 'default') { this.dropDownProjectName = event.target.value;
     }
    else {this.dropDownProjectName = null;}
   // this.getSelectedVariantProject(2);
  }

  dropDownProjectVariantName: string = '';
  selectedHandlerProjectVariantName(event : any)
  {
    if(event.target.value != 'default') { this.dropDownProjectVariantName = event.target.value;}
    else {this.dropDownProjectVariantName = null;}

  }

  ngOnInit() {
    this.getSelectedProject();
      }
}

API ProjectVariant должен вызываться со значением того, что выбрано в первом раскрывающемся списке.

getSelectedVariantProject(id: number): void{
     this.projectService.getProjectVariant(id)
      .subscribe(selectVariantProject => this.selectVariantProject = selectVariantProject);
  }

Как создать эту зависимость и передать значение того, что выбрано в первом раскрывающемся списке, в качестве аргумента в getSelectedVariantProject (id: number)

...