如何实现 *ngIf 在同一页面上的两个组件之间切换（隐藏和显示）答案

【问题标题】：How to implement *ngIf to toggle(hide and show) between two components on the same page如何实现 *ngIf 在同一页面上的两个组件之间切换（隐藏和显示）
【发布时间】：2019-06-11 17:42:13
【问题描述】：

我有两个组件 A(app-table) 和 B(app-edit)，我正在使用 Tabulator-table 库在这两个组件中生成表格。加载页面时，它应该只加载表 A。组件 B 的“正在加载”布尔值为 false，只有在单击表上的单元格时才变为 true，我正在使用回调函数将加载值设置为 true 或 false。在控制台（使用 console.log）上，我可以看到布尔值在单击时从 false 变为 true，但它不会改变视图。这意味着组件 B 永远不会出现在页面上。

componentA.ts

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-schedule',
  templateUrl: './schedule.component.html',
  styleUrls: ['./schedule.component.scss']
})


export class ScheduleComponent implements OnInit {
  public loading: boolean = true;

  constructor() {}

  openEdit(e, cell) {
    this.openEditValue = false
    console.log(this.openEditValue)
  }

  columnNames = [
    {
      title: "description",
      field: "description"
    },
    {
      title: "shortCode",
      field: "wbsElement.shortCode",
      cellClick: this.openEdit
    },
  ];
}

ngOnInit() {

}

componentA.html

<app-table 
    [tableRowData]= "schedule"
    [columnNames]= "columnNames"
    [tableID]= "tableID">
</app-table> 

  <div *ngIf= "loading">
    <app-edit ></app-edit>
  </div>

【问题讨论】：

标签： angular typescript tabulator

【解决方案1】：

您在openEdit 中更改的布尔值称为openEditValue，但您的*ngIf 绑定是loading。此外，要打开和关闭，您必须 negate(!) 点击时的值。

public openEditValue: boolean = false;

openEdit(e, cell){
   this.openEditValue = !this.openEditValue
   console.log(this.openEditValue) 
}

// template
<div *ngIf= "openEditValue">
    <app-edit ></app-edit>
</div>

【讨论】：

在进行建议的更改后，值从 true 变为 false，但仍然不显示组件 B
没有错误，点击单元格后，我看到值从 true 变为 false 没有别的
您已经对*ngIf 进行了更改？
是的，我做到了。没有运气

【解决方案2】：

请问您在问题中输入一些工作代码，您可以查看here的步骤

here 是您问题的解决方案

组件表

    import { Component, Input, OnInit } from '@angular/core';
import Tabulator from 'tabulator-tables';
import { StorageService } from './storage.service';

export interface IPerson {
  id: number,
  firstName: string,
  lastName: string,
  state: string
} // Use Interface for datatypes in Typescripts

@Component({
  selector: 'app-table',
  template: `<div id="tabulator-div"></div>`, // Html for Tabulator
  styles: []
})
export class TabulatorTableComponent implements OnInit {
  people: IPerson[] = [];
  columnNames: any[] = [];
  myTable: Tabulator;

  constructor(private storageService: StorageService) { }

  ngOnInit() {
    this.people = [
      { id: 1, firstName: "John", lastName: "Smith", state: "Ohio" },
      { id: 2, firstName: "Jane", lastName: "Doe", state: "Iowa" },
      { id: 3, firstName: "Bill", lastName: "Great", state: "Hawaii" },
      { id: 4, firstName: "Ted", lastName: "Adventure", state: "Arizona" }
    ];

const self = this;
    this.myTable = new Tabulator("#tabulator-div", {
      height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
      data: this.people, //assign data to table
      layout: "fitColumns", //fit columns to width of table (
      autoColumns: true,
      cellClick: function (e, cell) {
        self.storageService.emitShowEdit();
      },
    });
  }
}

【讨论】：