チェックボックスをオンにした後、角度4に画像が表示されない

角度4を学習しています。チェックボックスをオンにすると画像が表示されます。しかし、それは動作しません。チェックボックスをオンにした後、角度4に画像が表示されない

<input type="checkbox" name="chec" [(ngModel)]="check1" value="http://www.clipart-library.com/data_images/432133.jpg"> 

<img src="{{check1}}" height="100" width="100">

出典

2017-10-25 Boidurja Talukdar

私はあなたの質問にお答えします。

ここでは*ngIfという名前のものを使用することをお勧めします。これは、条件を確認できる角度条件付きの指示です。 HTMLで

<input type="checkbox" name="chec" [(ngModel)]="check1"> 
<div *ngIf="check1"> 
    You will see this only when checkbox is checked! 
</div>

Addiotional - ファイルパスをngModelにバインドしないでください。@Rakeshは論理値だと言っています。パス値でバインドされたさらにオブジェクトの双方向は、ファイルパスの変更を常にチェックし、おそらくアプリケーションの速度を落とします。

出典

2017-10-25 08:17:13

.HTML

<input type="checkbox" name="chec" (change)="checkOnClick($event)" value="http://www.clipart-library.com/data_images/432133.jpg"> 
    <img src="{{check2}}" height="100" width="100">

.TS

export class App { 
    check2:string = ""; 
    constructor() { 

    } 
    checkOnClick(e:any){ 
    if(e.target.checked){  
     this.check2 = e.target.value; 
    } 
    } 
}

PlunkerのURL：あなたhttps://plnkr.co/edit/S6f01oy0YQ8e94mQg7Uv?p=preview

出典

2017-10-25 08:03:57 i3lai3la

値が仕事ではありません私のapp.component.htmlは、このようになります[(ngModel)]="check1"を使用しています。これは真または偽を示しています。チェックした画像を表示する場合は、このようにコードを変更することができます

<img src="{{check1 ? 'url of image when checked': 'do what ever you want if not checked'}}" height="100" width="100">

出典

2017-10-25 08:05:34 Rakesh

チェックボックスをオンにした後、角度4に画像が表示されない

答えて

関連する問題