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

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

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

У меня есть раскрывающийся список, и я хочу передать Id выбранного значения ( $ 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',[]))
      )
  }

И у меня есть компонент таблицы, в котором мне нужно значение id из 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 , потому что мне нужно это значение в качестве аргумента других функций компонента (в машинописном тексте), когда пользователи выбирают что-то из выпадающего списка.

Ответы [ 2 ]

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

Подход 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);
}
0 голосов
/ 19 декабря 2018

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

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

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

Пример:

selectedvariant:any = val;

или

if(condition === condition_equal_to_whatevervalusage

Подробнее здесь

...