1
votes

Comment ajouter du style à un élément HTML en tapuscrit et angulaire

J'essaie de définir la propriété flex-grow sur element mais cela ne fonctionne pas.

script:

<ev-panel class="ev-panel ng-star-inserted" style="0" ng-reflect-panel="[object Object]"></ev-panel>
<ev-panel class="ev-panel ng-star-inserted" style="0" ng-reflect-panel="[object Object]"></ev-panel>
<ev-panel class="ev-panel ng-star-inserted" style="1" ng-reflect-panel="[object Object]"></ev-panel>

le résultat final:

(this.elementRef.nativeElement as HTMLElement).setAttribute(
      'style',
      'flex-grow:' + this.panel.width && this.panel.width.type === 1 ? '0' : '1'
    );

semble fonctionner correctement, mais où est flex-grow? Je demande de l'aide et de la compréhension

typescript angular css

4 commentaires

Que se passe-t-il si vous mettez l'instruction abrégée if else entre crochets?

Le style prend objet. Je suppose que vous devez ajouter le raccourci flex-grow en tant qu'objet

Le style @Mohit n'accepte pas d'objet. Comme tout autre attribut, il prend une chaîne :)

@PoulKruijt Oui je sais, je veux dire quelque chose comme en faisant de la syntaxe d'interpolation, cela prend un objet de styles, c'est-à-dire

dans react. Bien que je pense que c'est un problème de syntaxe dans le code ci-dessus. J'ai posté la réponse. Voyons si cela aide :)

3 Réponses :

0
votes

Considérant que vous utilisez angular, vous utilisez simplement @HostBinding:

(this.elementRef.nativeElement as HTMLElement).setAttribute(
  'style',
  `flex-grow: ${this.panel.width?.type === 1 ? '0' : '1'}`
);

la raison pour laquelle votre code ne fonctionne pas, c'est parce que vous n'avez pas de parenthèses. L'instruction entière devant le point d'interrogation est évaluée en premier, y compris la chaîne flex-grow . Pour le faire à votre guise (déconseillé), vous devez le faire comme ceci:

(this.elementRef.nativeElement as HTMLElement).setAttribute(
  'style',
  'flex-grow:' + (this.panel.width && this.panel.width.type === 1 ? '0' : '1')
);

et avec la dernière version angular / typescript, vous pouvez également utiliser chaînage facultatif :

export class PanelComponent {
  @HostBinding('style.flex-grow')
  get flexGrow(): string {
    return this.panel?.type === 1 ? '0' : '1'
  }
}

mais encore une fois, @HostBinding est la voie à suivre, si vous utilisez angular

0 commentaires

0
votes

Pouvez-vous essayer ceci,

((this.elementRef.nativeElement as HTMLElement).setAttribute(
      'style',
      `flex-grow: ${this.panel.width && this.panel.width.type === 1 ? 0 : 1}`
    );

J'espère que cela réglera la bonne chose.

0 commentaires

0
votes

Essayez le moteur de rendu angulaire2, est une abstraction fournie par Angular sous la forme d'un service qui permet de manipuler des éléments de votre application sans avoir à toucher directement le DOM. C'est l'approche recommandée.

     constructor(private renderer: Renderer2, private el: ElementRef) {

     const flexGrowValue = + this.panel.width && this.panel.width.type === 1 ? '0' : '1';

     this.renderer.setStyle(this.el.nativeElement, 'flex-grow',flexGrowValue  )

   }

https://angular.io / api / core / Renderer2

Exemple simple: https: //stackblitz.com/edit/angular-ivy-3wyy4g

0 commentaires