Angular - 隐藏/显示部分重置表单数据答案

【问题标题】：Angular - hiding/showing sections reset form dataAngular - 隐藏/显示部分重置表单数据
【发布时间】：2018-02-19 20:09:12
【问题描述】：

我有一个form，其中包含一些input 字段和一些select 字段，如下所示：

<div class="form-row ">
<div on-click="datiReferentiBancaClicked = !datiReferentiBancaClicked"></div>
<div class="form-row" *ngIf="!datiReferentiBancaClicked">
<label>Nome</label>
<input type="text" id="refbnkNome" [ngModel]="richiesta.refbnkNome" formControlName="refbnkNome" placeholder="Nome">
</div>
</div>

所以第一个div 切换第二个。问题是当我隐藏第二个div 并且我在字段中有一些数据时，这些数据会重置为div 隐藏。为什么会发生这种情况？我必须设置一些属性吗？谢谢。

【问题讨论】：

您能否提供更多代码。以便我可以轻松理解您的问题
使用（点击）而不是 ng-click！

标签： angular toggle hide show

【解决方案1】：

你可以使用 [ngStyle]="myFunction" 来隐藏你的 div 而不是 *ngIf

然后在你的组件中：

myFunction() {
  if (!datiReferentiBancaClicked) 
    return {'visibility':'visible'}
  else
    return {'visibility':'hidden'}
}

或

绑定到[隐藏]属性

<div [hidden]="datiReferentiBancaClicked"></div>

*ngIf 从 DOM 中移除 visibility:hidden 没有的元素。

【讨论】：

【解决方案2】：

使用 ngHide 代替 ngIf。它只会折叠元素并使其不可见，而 ngIf 会完全从 DOM 中更新元素。

【讨论】：

就是这样。 [hidden]="datiRichiestaClicked" 就像一个魅力。
我之前在重新考虑过，这完全有道理。因为 [hidden] 只是隐藏元素，而 *ngIf 指令从 DOM 中添加/删除元素，当然我会丢失我的数据。
ngHide 用于 angularJS 而不是 angular

【解决方案3】：

<div class="form-row">
<div ng-click="datiReferentiBancaClicked = !datiReferentiBancaClicked">Toggle</div>
<div class="form-row" ng-show="!datiReferentiBancaClicked">
<label>Nome</label>
<input type="text" id="refbnkNome" ng-model="richiesta.refbnkNome" placeholder="Nome">
</div>
<div class="form-row" ng-hide="datiReferentiBancaClicked">
// if datiReferentiBancaClicked is true!. This div will be active!
</div>
</div>
// This code is example for toggle

【讨论】：

如果可能的话，您应该在回答的同时提供解释。