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

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

组件a.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>

---

您在

openEdit

中更改的布尔值称为

openEditValue

，但您的

*ngIf

绑定为

加载

。此外，要打开和关闭，您必须（！）单击该值

public openEditValue: boolean = false;

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

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

public openEditValue:boolean=false；
openEdit（e，单元格）{
this.openEditValue=！this.openEditValue
console.log（此.openEditValue）
}
//模板

我可以请您在问题中添加一些工作代码吗，您可以从中看到步骤

你的问题解决了吗

组件表

    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();
      },
    });
  }
}

从'@angular/core'导入{Component，Input，OnInit}；
从“制表器表”导入制表器；
从“/storage.service”导入{StorageService}；
导出接口IPerson{
身份证号码：，
名字：string，
姓氏：string，
状态：字符串
}//在Typescripts中为数据类型使用接口
@组成部分({
选择器：“应用程序表”，
模板：``，//制表器的Html
样式：[]
})
导出类tabletorTableComponent实现OnInit{
人员：IPerson[]=[]；
列名称：任意[]=[]；
myTable：制表器；
构造函数（私有存储服务：存储服务）{}
恩戈尼尼特（）{
这个人[
{id:1，姓：“约翰”，姓：“史密斯”，州：“俄亥俄州”}，
{id:2，姓：“简”，姓“Doe”，州：“爱荷华州”}，
{id:3，姓：“比尔”，姓“伟大”，州：“夏威夷”}，
{id:4，姓：“Ted”，姓“冒险”，州：“亚利桑那州”}
];
const self=这个；
this.myTable=新制表器（“制表器div”{
height:205，//设置表的高度（在CSS中或此处），这将启用虚拟DOM并显著提高渲染速度（可以是任何有效的CSS高度值）
data:this.people，//将数据分配给表
布局：“fitColumns”，//使列适合表格的宽度(
自动列：对，
cellClick：函数（e，单元格）{
self.storageService.emitShowEdit（）；
},
});
}
}

在进行建议的更改后，值从true变为false，但仍然没有显示组件BNo错误。单击单元格后，我看到值从true变为false，其他内容均未显示。您对

*ngIf

进行了更改？是的，我做了。运气不好