每当单击按钮时调用函数后布尔值不会改变

Question

我有两个 angular 组件，如果单击第一个组件中的搜索按钮，则必须显示其中一个。但不幸的是，我所做的代码不起作用，只有在我手动更改布尔值 "clicked" 时才起作用。任何人都可以帮助我吗？

我的组件结构是这样的：

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">

Answer 1

我没有在您的代码中的任何地方看到函数 getButtonStatus 被调用。可能就是这个问题。我猜你需要在 ngOnInit 中调用它。此外，您正在通过构造函数将一个组件注入另一个组件。这在 angular 中不起作用，您应该通过服务。

Answer 2

我有一个结构：

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

一个App Component负责Log和Filter 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>

检查这个答案

每当单击按钮时调用函数后布尔值不会改变

boolean value doesn't change after a function is called whenever a button is clicked

components

function

click

button

angular