2017-07-16 20 views
1

これは数回質問されていますが、他の例は私の単純な使用例より少し複雑です。角度4 * ngIf - モデル変数の変更時の動的表示/非表示

選択ボックスの値に基づいてtextareaを表示/非表示にしようとしています。

ロード時に期待どおりに動作しますが、前後のセレクトの値を変更しても動作しません。

私が言ったように、モデル変数のデフォルト値はfalseであり、textareaは(必要に応じて)非表示になります。ここで

はHTMLです:

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-second-form', 
    templateUrl: './second-form.component.html', 
    styleUrls: ['./second-form.component.sass'] 
}) 
export class SecondFormComponent implements OnInit { 
    isFunded = false; 
    constructor() { } 
    ngOnInit() { 
    } 
} 

バックtrueに続いfalseに変更した後、どのように私はtextareaを再非表示にすることができます:ここで

<div> 
    <select id="isFunded" [(ngModel)]="isFunded" name="isFundedSelect"> 
     <option value="false" selected>No</option> 
     <option value="true">Yes</option> 
    </select> 
</div> 
<div> 
    <textarea class="form-control" rows="3" placeholder="Notes..." *ngIf="isFunded"></textarea> 
</div> 
<p>Is funded? {{isFunded}}</p> <!-- this updates when the select value changes --> 

は私のコンポーネントの全体の体はありますか?

それはreleventであれば、私は角CLIから生成されたプロジェクトを持っており、これらは私のアプリモジュールで輸入されている:BrowserModule, FormsModule, CommonModule

ありがとう!

答えて

4

は[ngValue] = '真' の代わりの値を使用してみてください。それをしなかった

+0

。ありがとうございました! – Mac

関連する問題