2017-12-16 12 views
-1

製品の詳細を画面に表示するフォームがあります。編集ボタンのonclickは、すべての詳細を非表示にして、編集可能なコンポーネントを表示します。私は、角2 * ngIf条件を使用しているが、角度2の条件に基づいて1つの要素を表示する方法

<p *ngIf="isEditable">Product 1</p> 
<input type="textbox" *ngIf="!isEditable" /> 

edit() { 
    isEditable=true; 
} 

画面はラベルがロードされて動作していないが、編集ボタンのクリックでlableとテキストボックスの両方が表示されます。私はちょうどテキストボックスとクリックしてラベルを非表示にしたい。これどうやってするの。

+0

あなたはChangeDetectionStrategyを使ってみましたか? –

+0

'this.isEditable = true'にする必要があります。あなたは 'this'を逃しています – pixelbits

答えて

-1

あなたは正しいです、関数内で唯一のものは、私は同じ問題に直面してthis.editable

edit() : void { 
    this.isEditable=true; 
} 
+0

私はthis.isEditableをedit()内でのみ使用しています。まだ私は問題 –

+0

に直面している問題は何ですか? – Sajeetharan

+0

domロードしていますlableさん、on editクリックするとim binding textbox on editが使用可能になります。ラベルはすでにDOMに追加されています。 –

-1

を使用しています。私は単純に、このようなPRODUCT_IDすなわちの助けを借りてこれを達成:

<div *ngIf="(!product_id)"> 
<input type="text"> 
--------------------------- 
</div> 

あなたが製品を作成しているときにのみ表示されます。製品を追加した後、product_idが生成され、このdivは表示されません。

希望する

+0

の代わりにvoidが使用されています。私は、条件に基づいて2つのDOM要素を非表示にして表示したいと思います。 –

+0

要素を非表示にしたい場所にのみこのdivタグを置きます。他のDOM要素では、この条件は適用されません。 –

関連する問題