J'ai un scénario où je génère des éléments dynamiques avec les données du backend

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

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

</div>


</tr> 

Mon fichier Ts

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

}

}

Ce que je veux faire, c'est quelque chose comme ci-dessus. J'ai essayé quelque chose comme ci-dessous, mais cela ne fonctionne pas, cela génère une erreur

La propriété 'display' n'existe pas sur le 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";

    }

    }

Toutes les suggestions, comment faire .Merci

0
trinity 7 nov. 2019 à 18:46

2 réponses

Meilleure réponse

La propriété 'display' n'existe pas sur le type 'HTMLInputElement'

En effet, les éléments HTML n'ont pas de propriété display. Ce que vous recherchez, c'est:

document.getElementById(`full${id}`).style.display='block';
1
David Meza 7 nov. 2019 à 15:54

Plutôt que de manipuler directement le DOM, la manière la plus angulaire de procéder serait de suivre l'état de visibilité de chaque ligne et de générer de la visibilité via NgIf

NgIf: directive structurelle qui inclut conditionnellement un modèle basé sur la valeur d'une expression contrainte à Boolean. Lorsque l'expression est évaluée à true, Angular rend le modèle fourni dans une clause then, et lorsqu'elle est fausse ou nulle, Angular rend le modèle fourni dans une clause else facultative. Le modèle par défaut pour la clause else est vide.

Voici un exemple avec un seul booléen pilotant le basculement d'un seul div, mais vous pouvez faire quelque chose de similaire avec une carte sur vos données.

@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;
}
1
kylestephens 7 nov. 2019 à 15:59