Как использовать ngIf, чтобы проверить, существует ли другой элемент?

Question

Как заставить элемент отображать / скрывать, если существует другой элемент (который будет динамически заполнен позднее)?

Например:

app.component.ts

export class AppComponent implements OnInit, AfterViewInit {

    ngOnInit(): void {}

    ngAfterViewInit() {

         //Run a library that will populate the table, for example
         //This will create an element with an id tableData
         generateTableDataAfterDOMIsReady('#container');

    }

}

app.component.html

<div id="container">
    <!-- When the javascript function is invoked, it will dynamically change the content inside this div and generate a <div id="tableData"></div>
</div>
<div *ngIf="pseudoIsTableDataExists()">Data has been generated</div>

Нет другой переменной, которую я могу слушать, чтобы заставить ее работать. Единственная подсказка - заставить второй div показать себя, когда существует #tableData.

Answer 1

Проверьте наличие tableData , введя маркер Document в конструктор. Затем используйте обычный старый JavaScript, чтобы найти элемент по id. Как только представление загрузится, проверьте, присутствует ли оно, как показано ниже:

import { Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";

constructor(@Inject(DOCUMENT) document) {
}

ngAfterViewInit() {
   if (document.getElementById('tableData')) {
      // success scenario
   } else {
      // failure
   }
}

ngOnInit() {
   generateTableDataAfterDOMIsReady('#container');
}

Переместите вызов generateTableDataAfterDOMIsReady('#container'); в ngOnInit, а не в ngAfterViewInit.

@ViewChild было бы лучше, но это работает, только если идентификатор тега указан как #id.

Answer 2

Просто вы можете связать hidden свойство.

HTML

<div [hidden]="!isTableDataExists">
    Data has been generated
</div>

Компонент

 ngAfterViewInit() {

     //Run a library that will populate the table, for example
     //This will create an element with an id tableData
     generateTableDataAfterDOMIsReady('#container');
     this.isTableDataExists = true;
}

Answer 3

Грубый подход, но я верю, что это сработает.

<div id="container" #c>
</div>
<div *ngIf="c.children.length > 0">Data has been generated</div>

Answer 4

Самый простой способ - установить флаг

  ngAfterViewInit() {

         //Run a library that will populate the table, for example
         //This will create an element with an id tableData
         generateTableDataAfterDOMIsReady('#container');
         this.pseudoIsTableDataExists=true
    }

и

<div *ngIf="pseudoIsTableDataExists">Data has been generated</div>