如何使用 Angular 7 中的 id 隐藏动态 div

Question

我有 2 个 div，我需要根据下拉选择隐藏和显示它。当我选择的选项是 chartdata 时，'ChartData' div 将再次显示，当我选择 tabledata 时，'TableData' div 将显示。我可以用 ngif 轻松做到这一点，但问题是'TableData' div 是从插件生成的，我不能把 ngif 标签放在那里，所以我只需要使用它的 id。有没有办法用 angular 7 做到这一点。 这是代码。

home.component.html

<select (change)="onChangeEvent($event)"><option>Chartdata</option><option>Tabledata</option></select>
<div id="chart">ChartData</div>
<div id="table">TableData</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit { 

    nestedjson:any;
 constructor(private formBuilder: FormBuilder) {


     }

  ngOnInit() {
      this.nestedjson = [{"name":"parent1","value":["child11","child12"]},{"name":"parent2","value":["child2"]},{"name":"parent3","value":["child3"]}];

} 

onChangeEvent(ev) {
    console.log(ev.target.value); // should print option1
}   


}

Answer 1

IMO 您应该使用*ngIf 条件来执行此操作，并且正如您所说的某些部分是动态的，因此在这种情况下，您应该在每次用户更改/选择另一个选项时重新初始化第三方插件。如下 -

<select (change)="onChangeEvent($event)"><option>Chartdata</option><option>Tabledata</option></select>
<div *ngIf='selectedOption === "chartData"' id="chart">ChartData</div>
<div *ngIf='selectedOption === "tableData"' id="table">TableData</div>


onChangeEvent() { */Re initilize third party plugin/*}

Answer 2

你可以绑定到[隐藏]属性

[hidden]="!isChartSelected"
[hidden]="!isTableSelected"

请记住，这只会隐藏 div，不会将其从圆顶中移除。

一个更安全且向后兼容（小于即 11）的选项是使用一个类并使用 ngClass 来显示隐藏。

.hide {
    display: none !important;
}

然后

[ngClass]="{'hidden': selectedValue === 'Chart'}"
[ngClass]="{'hidden': selectedValue === 'Table'}"

如果你不能使用 ngClass，那么你可以像这样使用普通的旧 javascript：

let targetElement = document.getElementsById('chart');
targetElement.classList.remove("hidden");   //remove the class
let targetElement = document.getElementsById('table');
targetElement.classList.add("hidden");   //add the class

如果您想隐藏一个并显示另一个，反之亦然。

有关此事的更多信息，您可以查看这个精彩的解释here