web-dev-qa-db-fra.com

Comment lier une propriété à Style Width Pixel in Angular 2?

J'utilise Angular 2.0 et j'ai écrit le code ci-dessous:

<div [style.width.px]="width">some texts </div>

J'ai aussi essayé

<div [ngStyle]="{'width.px': width}">some texts </div>

export class MyComponent
{
 width: number = 150;
}

Mais cela ne lie pas la largeur à l'élément div.

J'utilise la dernière version de Angular 2.0.

Qu'est-ce que je fais mal?

htmlcssangular
31
Dynamic

Fonctionne bien pour moi

Exemple de Plunker 

@Component({
  selector: 'my-app',
  styles: [`div { border: 3px solid red; }`]
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div [style.width.px]="width">some texts </div>

    </div>
  `,
})
export class App {
  name:string;
  width: number = 250;
  constructor() {
    this.name = 'Angular2'
  }
}
37
Günter Zöchbauer

Cela a fonctionné pour moi:

<div [style.width]="paymentPerc+'%'"> Payment Recieved</div>
10
Bokang Masilo

Vérifiez avec les mêmes que ci-dessous une fois:

<div [style.width]="width+'px'">some texts </div>

export class MyComponent
{
 width: number = 150;
}
3
ranakrunal9

Pour unité de pixel

<div [style.width.px]="width"> Width Size with px</div>

Ou

<div bind-style.width.px="width"> Width Size with px</div>

Autres unités CSS

<div [style.width.em]="width"> Width Size with em</div>
<div [style.width.pt]="width"> Width Size with pt</div>
<div [style.width.%]="width"> Width Size with %</div>

composant

export class MyComponent
{
   width: number = 80;
}
1
ElasticCode