логическое значение не изменяется после вызова функции при каждом нажатии кнопки - PullRequest
Новая
       12

логическое значение не изменяется после вызова функции при каждом нажатии кнопки

0 голосов
/ 23 мая 2019

У меня есть два угловых компонента, один из которых должен отображаться, если нажата кнопка поиска в первом.Но, к сожалению, код, который я сделал, не работает, а работает только тогда, когда я изменяю логическое значение «нажал» вручную.Может ли кто-нибудь помочь мне в этом?

структура моих компонентов выглядит так: 

src
 |app
   |components
      |FilterBarComponent
      |LogTableComponent

код кнопки поиска в FilterBarComponent: 

<button class="btn-search text-center"  (click)="buttonStatus = 
!buttonStatus">Search</button>

FilterBarComponenet.ts: 

export class FilterBarComponent implements OnInit {
  buttonStatus: boolean;

  constructor(private logsService: HttpClientTestService) {
    this.buttonStatus = false;
  }

LogsTableComponent.ts: 

import { Component, OnInit } from '@angular/core';
import { FilterBarComponent } from './../filter-bar/filter-bar.component';

@Component({
  selector: 'app-logs-table',
  templateUrl: './logs-table.component.html',
  styleUrls: ['./logs-table.component.css']
})
export class LogsTableComponent implements OnInit {
  clicked: boolean;
  constructor(private filterBar: FilterBarComponent) { }


  ngOnInit() {
  }

  getButtonStatus() {
    this.clicked = this.filterBar.buttonStatus;
  }

}

LogsTableComponent.html: 

<div class="container-fluid p-2" *ngIf="clicked">

Ответы [ 2 ]

0 голосов
/ 23 мая 2019

У меня есть структура: 

`-App Component
 -Log Table Component
 -Filter Bar Component`

Компонент приложения отвечает за связь между журналом и компонентом фильтра

app.component.ts 

`export class AppComponent {
   public clickedEvent: boolean;

   childEventClicked(event: boolean) {
     this.clickedEvent = event;
   }
}`

app.component.html 

`<div style="text-align:center">
  <app-filter-bar (eventClicked)="childEventClicked($event)"></app-filter-bar>
  <app-log-table [clicked]="clickedEvent"></app-log-table>
</div>`

filter-bar.component.ts 

`export class FilterBarComponent implements OnInit {
  public buttonStatus: boolean = false;
  @Output() eventClicked: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {
  }

  onClick(event: boolean): void {
    this.buttonStatus = !event;
    this.eventClicked.emit(this.buttonStatus);
  }
}`

filter-bar.component.html

<button class="btn-search text-center" (click)="onClick(buttonStatus)"> button status: {{buttonStatus}} </button>

log-table.component.ts 

export class LogTableComponent implements OnInit {
  @Input() clicked: boolean;

  constructor() { }

  ngOnInit() {
  }
}

log-table.component.html 

<div class="container-fluid p-2" *ngIf="clicked">Test</div>

Проверить этот ответ

0 голосов
/ 23 мая 2019

Я не вижу функции getButtonStatus, вызываемой в вашем коде. Может быть, это проблема. Вам нужно позвонить в ngOnInit Я думаю. Также Вы вводите компонент в другой через конструктор. Это не работает в угловых, вы должны пройти мимо службы.

...