状態の画像ソースを変更するAngular2

Question

私のアプリケーションはアクティブ（真）または（アクティブ）（！actice）のいずれかです。

<img [src]="{'../../resources/images/pause.png':active, '../../resources/images/play.png':!active}"

（典型的なブールvalueA：？VALUEBが正しくない）私は、各状態のための私のイメージソースを変更したい

コードが実行されているが、画像が見つかりません。 パスを変更しても効果がありませんでした。たぶん、あなたは...

UPDATE フォルダ構造

app | +--components | | | +--header (html, ts,...) | +--resources | | | +--images (png)

Answer 1

Plunkerデモ

は、中括弧に引用符""で{}を置くとパスが正しいことを確認しないでくださいすることができます。どちらかといえば、これはあなたがやる方法です。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>{{active ? "Front": "Back"}} of '18 Civic Type R</h2> 
     <label> Toggle Front and Back View 
      <input type="checkbox" name="checkbox" [(ngModel)]="active" /> 
     </label> 
     <br/> 
     <img [src]="active ? frontPath : backPath"> 
    </div> 
    `, 
}) 
export class App { 
    active:boolean = false; 

    frontPath:string = "http://www.topgear.com/sites/default/files/styles/fit_980x551/public/images/news-article/carousel/2016/09/a4705f0aaad0587c653b37b03409b0a0/78932_new_civic_type_r_prototype_breaks_cover_in_paris-1.jpg?itok=Few4WV6D"; 

    backPath:string = "http://tophondacars.com/wp-content/uploads/2018-Honda-Civic-Type-R-pwe.jpg"; 

    constructor() { 

    } 
} 

OR

あなたがしたいときには、（技術的に追加/削除）*ngIfを使用して、ちょうど/非表示を示すことができました。

*ngIf

{式}に基づいて、DOMツリーの部分を削除または再作成。

ngIfに割り当てられた式が偽値に評価された場合、その要素はDOMから削除されます。そうでない場合、要素の複製がDOMに再挿入されます。

<img *ngIf="active" [src]="../../resources/images/pause.png"> 
<img *ngIf="!active" [src]="../../resources/images/play.png">