角度2のimgの幅は0に設定されます

Question

私はテンプレート内でimg srcとwidthを動的に設定しています。値がどのような私が見ることはということです.TS

this.items.push(new ImageMessage('http://someimage.png', '100%')); 

から以下のように渡され

<img src="{{item.msg}}" width="{{item.width}}" style="float:right" *ngIf="item.templateType == 'image'" />{{item.width}} 

：私が見る問題は、それは次のようにテンプレートが見えます0

に幅を設定していることですイメージは表示されませんが、item.widthの値は正しく出力されます。インスペクタを調べると、幅が0に設定され、画像が表示されない理由が説明されています。

しかし、私は幅が私はあなたが単一引用符で100％を持っている持っているので、それが0に幅を設定するかもしれないと思うimgタグ

Answer 1

あなたはあなたの例では<img />のような要素のstyleattribute bindingをターゲットに一方向結合構文[style.width.%]を使用してパーセンテージで幅を設定することができます。 HTML5では、widthプロパティがピクセルである必要があるため、[style.width.%]属性バインディングを使用すると、幅をパーセンテージとして設定できます。

ImageMssageオブジェクトでは、この作業を行うためにImageMessageオブジェクトのwidth値からパーセント '％'文字を削除する必要があります。このシンタックスでは、文字列または数字のどちらでも使用できます。 '100'または100のいずれかが機能します。

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {CommonModule} from '@angular/common'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 

     <div *ngFor="let item of items"> 
     <img [src]="item.msg" [style.width.%]="item.width" style="float:right;" /> 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    items: any[]; 

    constructor() { 
    this.items = [ 
     { msg: 'http://placehold.it/800', width: '100' }, 
     { msg: 'http://placehold.it/800', width: '75' }, 
     { msg: 'http://placehold.it/800', width: 50 }, 
     { msg: 'http://placehold.it/800', width: '25' } 
    ]; 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, CommonModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

あなたはピクセルを設定したい場合は、以下を使用することができます。

<img [src]="item.msg" [style.width.px]="item.width" ... />{{item.width}}px 

ここでは、機能性を実証plunkerです。

うまくいけば、これが役に立ちます。

Answer 2

に0に設定なっている理由を理解するために失敗しています。 { width: '100%' }のように、引用符を削除して{ width: 100% }を生成してください。これは、なぜitem.widthの値を出力するのかを説明するかもしれません。