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 隐藏。为什么会这样？我必须设置一些属性吗？谢谢。

Answer 1

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

然后在你的组件中：

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

或

绑定到 [隐藏] 属性

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

*ngIf 从 DOM 中删除元素，而 visibility:hidden 没有。

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

使用 ng Hide 而不是 ngIf。它只会折叠元素并使其不可见，而 ngIf 会从 DOM.

中完全删除元素

Angular - hiding/showing 部分重置表单数据

Angular - hiding/showing sections reset form data

show

toggle

hide