Angular-隐藏/显示部分重置形式数据

Question

我有一个 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 HID。为什么会发生这种情况？我必须设置一些属性吗？谢谢。

Answer 1

使用nghide代替ngif。它只会使元素崩溃并使其变得不可见，而NGIF完全翻新了DOM的元素。

Answer 2

<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

Answer 3

您可以使用[ngstyle] =" myFunction"隐藏您的DIV而不是 *ngif

然后在您的组件中：

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

或

绑定到[隐藏]属性

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

*ngif删除元素形式的DOM，其中可见性：隐藏不可能。