私はAngular 2.0を使用しており、以下のコードを作成しました。
<div [style.width.px]="width">some texts </div>
私も試しました
<div [ngStyle]="{'width.px': width}">some texts </div>
export class MyComponent
{
width: number = 150;
}
ただし、幅をdiv要素にバインドしません。
最新バージョンのAngular 2.0を使用しています。
私は何を間違えていますか?
私にとってはうまくいく
@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'
}
}
これは私のために働いた:
<div [style.width]="paymentPerc+'%'"> Payment Recieved</div>
以下と同じように一度確認してください:
<div [style.width]="width+'px'">some texts </div>
export class MyComponent
{
width: number = 150;
}
ピクセル単位用
<div [style.width.px]="width"> Width Size with px</div>
または
<div bind-style.width.px="width"> Width Size with px</div>
他の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>
コンポーネント
export class MyComponent
{
width: number = 80;
}