Как передать значение из HTML для использования из других функций компонента Typescript

Question

У меня есть раскрывающийся список, и я хочу передать идентификатор выбранного значения ($event.target.value) в другие функции компонента.

 <div class="dropdown  ml-auto">
   <select  (change)=getSelectedVariantProject($event.target.value)>
      <option value = "default">Select project</option>
      <option *ngFor = "let project of selectProject" value = {{project.projectId}}>{{project.projectName}}</option>
   </select>
 </div>

У меня есть служба проекта с этими двумя функциями:

getProjects(): Observable<any>{
    return this.http.get<Project>(this.urlProject)
    .pipe(
    catchError(this.handleError('getProject',[]))
  );
  }

  getProjectVariant(id: number): Observable<any>{
    var url = this.urlProjectVariant;
    url = url + id;
    return this.http.get<ProjectVariant>(url)
      .pipe(
        catchError(this.handleError('getProjectVariant',[]))
      )
  }

И у меня есть компонент таблицы, в которой мне нужно значение идентификатора из HTML в аргументе projectVariantId:

export class TablesComponent implements OnInit {

  filters: MisraLint;
  pageMisraMessages: PageMisraLintTable;
  selectedPage : number = 0;
  buildId: number = 1;
  sizeTableEntries: number = 100;
  page: any;

  constructor(private misraService: MisraService) { }

  getFilters(): void{  
    this.misraService.getMisraLintFilters(2)
      .subscribe(filters => this.filters = filters);
  }

  getPageMisra(page:number,projectVariantId: number,size:number,buildId:number): void{
    this.misraService.getPageMisraLint(page,projectVariantId, size,buildId)
      .subscribe(pageMisra => {
        this.pageMisraMessages = pageMisra
        console.log("Misra meessgaes: " + pageMisra.content)
      })

  }

  getMisraLintByFilters(page: number, projectVariantId: number, size:number, filter: string)
  {
       //call rest API to apply filters
   this.misraService.getMisraLintByFilters(page,projectVariantId,size,filter)
   .subscribe(pageMisra => {
     this.pageMisraMessages = pageMisra
   })
  }

  ngOnInit() {
    this.getFilters();
    this.getPageMisra(0,2,this.sizeTableEntries,this.buildId);
  }
}

Я не знаю, как это сделать. Как передать $event.target.value, потому что мне нужно это значение в качестве аргумента других функций компонента (в машинописном тексте), когда пользователи выбирают что-то из выпадающего списка.

Answer 1

Подход 1.) Если вы используете другой компонент на той же странице, чем

В component.ts

selectedProject = null;

getSelectedVariantProject(id){
 this.selectedProject = id;
}

в component.html

<app-other-component selectedProject="selectedProject"></app-other-component>

в otherComponent.ts

@Input() selectedProject;

Подход 2.) ИЛИ другой компонент находится на другой странице, чем вы можете использовать сервис.

В компоненте

constructor(private someService: SomeService) {

}

getSelectedVariantProject(id){
     this.someService.selectedProject = id;
}

в otherComponent.ts

constructor(private someService: SomeService) {
 console.log(this.someService.selectedProject);
}

Answer 2

У тебя есть: <select (change)=getSelectedVariantProject($event.target.value)>

Вы можете добавить переменную на конец вашего компонента. Такие как selectedvariant или что-то, или сразу же использовать его в функции, как:

getSelectedVariantProject(val){//code here} Обратите внимание, что (val) это ваш $event.target.value.

Пример:

selectedvariant:any = val;

или же

if(condition === condition_equal_to_whatevervalusage

Читайте больше информации здесь