Как реализовать * ngIf для переключения (скрытия и отображения) между двумя компонентами на одной странице - PullRequest
Новая
       49

Как реализовать * ngIf для переключения (скрытия и отображения) между двумя компонентами на одной странице

0 голосов
/ 11 июня 2019

У меня есть два компонента A (app-table) и B (app-edit), и я использую библиотеку Tabulator-table для генерации таблиц в обоих компонентах.Когда страница загружается, она должна загружать только таблицу A. Логическое значение «loading» для компонента B - false, и оно становится истинным только при щелчке ячейки в таблице. Я использую функцию обратного вызова для установки значения загрузки 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>

Ответы [ 2 ]

1 голос
/ 11 июня 2019

Логическое значение, которое вы изменяете в openEdit, называется openEditValue, но ваша привязка *ngIf равна loading.Также для включения и выключения необходимо отменить (!) Значение при нажатии. 

public openEditValue: boolean = false;

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

// template
<div *ngIf= "openEditValue">
    <app-edit ></app-edit>
</div>
0 голосов
/ 12 июня 2019

Могу ли я попросить вас указать рабочий код в вопросе? Вы можете увидеть шаги с здесь

здесь - решение вашей проблемы

Таблица компонентов 

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