如何通过 document.getElementById inAngular 更改显示

Question

I have a scenario where I am generating dynamic elements with the data from backend some what like

<tr *ngFor="let data of datas" (click)="display(data.id)">

<div id="'full'+data.id" [style.display]=" active? 'block': 'none'">

</div>


</tr> 

My Ts File

export class Component{
active=false;
display(id)
{
document.getElementById(`full${id}`).display="block";

}

}

What I want to do is something like above. I tried something like below but that doesn't work it throws error

Property 'display' does not exist on type 'HTMLInputElement'

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

export class Component{
 active=false;
constructor(@Inject(DOCUMENT) document) {

   }
    display(id)
    {
    document.getElementById(`full${id}`).display="block";

    }

    }

any suggestions,how to do this.Thanks

Answer 1

Property 'display' does not exist on type 'HTMLInputElement'

That's because HTML elements do not have a property display . What you're looking for is:

document.getElementById(`full${id}`).style.display='block';

Answer 2

Rather than directly manipulating the DOM, the more Angular way of doing this would be to track the visibility state of each row and drive visibility through NgIf

NgIf: A structural directive that conditionally includes a template based on the value of an expression coerced to Boolean. When the expression evaluates to true, Angular renders the template provided in a then clause, and when false or null, Angular renders the template provided in an optional else clause. The default template for the else clause is blank.

Here is an example with a single boolean driving the toggle of a single div, but you could do something similar with a map on your data.

@Component({
  selector: 'ng-if-simple',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show">Text to show</div>
`
})
export class NgIfSimple {
  show: boolean = true;
}