为什么Angular控制不会隐藏？ （隐藏但保留在DOM中以保留价值）

Question

我希望能够从HTML隐藏Angular控件，以便可以在TypeScript中获取值

我浏览过许多外部文章以及SO文章，包括：visibility:hidden in Angular 2

我只能说的区别是，他们通常是在像div这样的常规html上执行此操作，而不是在Angular控件上执行

。

我尝试了以下方法：

[style.display]="'none'"  (no)
[style.visibility]="'hidden'"
[hidden]="hideElement"
[style.display]="hideElement?'none':'inherit'">

例如：

<mat-form-field class="input-width">
       <input matInput i18n-placeholder="@@Thing_N_55" placeholder="First Name" [style.visibility]="'hidden'" formControlName="firstName" value="{{user.FirstName}}" required>
 </mat-form-field> 

我在这里想念什么？

Answer 1

尝试制作CSS类并在设置的条件下启用它。

.hide-element {
 display: none;
}

然后在您的HTML中尝试类似的操作。

<mat-form-field class="input-width">
   <input matInput i18n-placeholder="@@Thing_N_55" placeholder="First Name" 
   [class.hide-element]="true" formControlName="firstName" value=" 
   {{user.FirstName}}" required>
</mat-form-field> 

关注焦点

[class.hide-element]="true"

这里显示为true的条件可以是等于true的任何条件，并且应该将CSS类应用于该元素，并且该元素也应保留在DOM中，因为仅应用了其附加CSS，并且没有控制器逻辑删除了元素。

Answer 2

这应该可以正常工作：

df.rolling(3).mean()[2::3].reset_index(drop=True)
     a
0  3.0
1  1.0
2  2.0

Demo