Angular 4 * ngIf - 模型变量的动态显示/隐藏

时间:2017-07-16 20:07:45

标签: angular

这已被问过几次,但其他例子似乎比我的简单用例复杂一点。

我正在尝试根据选择框的值显示/隐藏textarea

它在加载时按预期工作,但在来回更改选择值时不起作用。

正如我所说,模型变量的默认值为falsetextarea在加载时隐藏(根据需要)。

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

以下是我的组件的整个主体:

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

如何在更改为textarea然后返回false后重新隐藏true

如果它是相关的,我有一个从角度CLI生成的项目,这些是我的app模块中的导入:BrowserModule, FormsModule, CommonModule

谢谢!

1 个答案:

答案 0 :(得分:4)

尝试使用[ngValue] =&#39; true&#39;而不是价值。