时间戳

首页 > 解决方案 > 为什么 Angular 控件不会隐藏？（隐藏但保留在 DOM 中以保留价值）

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

问题描述

我希望能够从 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>

我在这里想念什么？

标签： htmlangulartypescript

解决方案

尝试创建一个 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 被应用并且没有控制器逻辑删除元素。

推荐阅读