Question

我有两个组件A（应用程序表）和B（应用程序编辑），并且我正在使用制表器表库在这两个组件中生成表。加载页面时，它仅应加载表A。组件B的“加载”布尔值是false，并且仅在单击表中的单元格时才变为true，我正在使用回调函数将加载值设置为true或false。在console上（使用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>

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

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

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

2 个答案: