Angular 4 *ngIf - Dynamic Show/Hide on Model Variable Change

Question

This has been asked a few times, but the other examples seem a bit more complicated than my simple use case.

I am trying to show/hide a textarea based on the value of a select box.

It works as expected on load, but not when changing the value of the select back and forth.

As I said, the default value of the model variable is false and the textarea is hidden on load (as desired).

Here is the HTML:

<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 -->

Here is the entire body of my component:

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() {
  }
}

How can I re-hide the textarea after changing to false then back to true ?

If it is relevent, I have a project generated from the angular CLI and these are the imports in my app module: BrowserModule, FormsModule, CommonModule

Thanks!

Answer 1

尝试使用[ngValue] ='true'代替value。