Обновление компонента только при двойном щелчке по событию щелчка в angular

В моем проекте Angular я создал поле поиска с кнопкой для получения результата поиска от другого компонента. У меня есть розетка маршрутизатора в моем компоненте приложения, и я переключаю розетка маршрутизатора на компонент результатов поиска, используя переменную значение поиска. Я использую службу для разделения этой переменной значения поиска между компонентами. Итак, когда я нажимаю ссылку в html, появляется розетка маршрутизатора. Когда я нажимаю на поле поиска и выполняю поиск, появляется результат поиска. Моя проблема в том, что когда розетка роутера активирована, мне нужно дважды нажмите кнопку поиска или дважды нажмите клавишу ввода, чтобы отобразился результат поиска.

Код -

search.component.ts:

export class SearchComponent implements OnInit {

  value: string;

  constructor(private data: SendDataService){}

  show: boolean = true;

  showEl(){
    this.show = true;
  }

  newValue() {
    this.data.changeValue(this.value)
    this.show = false;
  }

  ngOnInit(): void{
    this.data.currentValue.subscribe(value => this.value = value)
  }
}

search.component.html:

<input type="text" [(ngModel)]="value" (click)="showEl()" (keyup.enter)="newValue()" (input)="showEl()">
<button (click)="newValue()">Search</button>

search-result.component.ts:

export class SearchResultComponent implements OnInit {

  _postsArray: = //JSON Object;
  value: string = "";
  filterarray: any[] = [];

  constructor(private data: SendDataService){}

  getData(){
    this.data.currentValue.subscribe(value => {this.value = value;
      this.showData();
    })
  }

  showData(){
    if (this.value != null){
      this.filterarray=
        this._postsArray.filter(f => 
          f.title.toLowerCase()
            .includes(this.value.toLowerCase()))
              .map(searchname=>searchname.title)
    }
  }

    ngOnInit(): void{
    this.getData();
  }

}

app.component.html:

<div>
    <div *ngIf="!value">
        <router-outlet></router-outlet>
    </div>
    <div *ngIf="value">
        <app-search-result></app-search-result>
    </div>
</div>

Когда я помещаю {{ценить}} в app.component.html, он показывает значение при первом нажатии кнопки поиска. но <app-search-result> появляется только при втором щелчке. Как я могу это решить?

stackoverflow.com/questions/48295288/…
Ramesh 10.09.2018 08:26

вы пробовали использовать ng-change?

NeverGiveUp161 10.09.2018 08:29

в чем сходство между click и ng-change?

Dean Johns 10.09.2018 08:35
0
3
368
0

Другие вопросы по теме