Angular 2 [隐藏] 似乎不起作用？答案

【问题标题】：Angular 2 [hidden] does not seem to be working?Angular 2 [隐藏] 似乎不起作用？
【发布时间】：2021-11-29 14:34:25
【问题描述】：

我的组件是这样定义的：

import { Component } from 'angular2/core'

@Component({
    selector: 'sidebar',
    templateUrl: 'js/app/views/sidebar.html',
})
export class SidebarComponent {
    public sections: boolean[] = [
        true,
        false,
        false,
        false,
        false,
        false,
        false,
        false
    ];
}

sidebar.html 模板：

<h3 class="proofTitle">...</h3>
<p [hidden]="sections[0]">
    ...
</p>
<p [hidden]="sections[1]">
    ...
</p>
...
<p [hidden]="sections[7]">
    ...
</p>

看起来很简单，但由于某种原因，它显示了所有部分......我错过了什么？

【问题讨论】：

你检查过隐藏属性是否被添加到DOM中的元素吗？（在开发工具中）
是的......而且我也发现了我的错误...... boolean array 需要颠倒它的值...... duh

标签： angular

【解决方案1】：

检查您的<p> 标签上没有任何显示 css 规则会覆盖hidden 行为，例如：

p {
  display: inline-block !important;
}

因为hidden html 属性的行为类似于display: none

【讨论】：

我不明白你的意思@MarkRajcok，angular2 添加或删除hidden html 属性取决于此语法后面的表达式。我的回答谈到了与角度无关的错误。这是关于它的行为，它可以被 css 规则覆盖。 davidwalsh.name/html5-hidden
对不起，我读你的答案太快了......我以为我读的是“一定有”而不是“一定没有”......我的错误。我删除了我的评论。
没有必要指定“！important”，因为[hidden]规则只有“display:none”。因此，如果你有机会在你的 CSS 中定义一个更强大的显示规则，它就不会起作用。
!important 永远不应该是一个解决方案

【解决方案2】：

只需添加以下代码：

p[hidden] { display: none; }

到您的styles.css 文件。

【讨论】：

很好的答案！当我不希望它显示时，这会覆盖我在元素上的显示样式。

【解决方案3】：

如果display: none 属性被覆盖，则使用*ngIf="false"

【讨论】：

隐藏它与 *ngIf 不同。 [hidden] 只是隐藏一个元素，相反，每次表达式设置为 true 时，ngIf 都会重新创建一个元素。所以它更贵，不应该用它来代替。您现在应该在哪里使用其中一个。
为避免 css 不必要的行为，建议使用 ngIf 而不是在此处隐藏到：angularjs.blogspot.fr/2016/04/…（参见第一部分）

【解决方案4】：

作为替代，使用这个：

[style.display]="sections[i] ? 'none' : 'block'"

【讨论】：

【解决方案5】：

事实上，要利用 HTML5 hidden 属性隐藏元素，您的表达式必须返回值 true。在这种情况下，该属性将出现在您的内存 DOM 中。当值为false 时，属性不存在且元素可见。

希望对你有帮助蒂埃里

【讨论】：

【解决方案6】：

如果你去 dom 你可以看到 hidden 制作这种风格

p[attributes Style]
{
   display: none;
}

这会影响所有 p 元素，您可以在此处查看如何工作：

http://www.talkingdotnet.com/dont-use-hidden-attribute-angularjs-2/

【讨论】：

【解决方案7】：

在我的情况下，它发生是因为我省略了 name 属性，需要使 alert condition 工作：

<div [hidden]="submitted">  <!-- wasn't working -->
    <div class="form-group">
    <label for="name">Name</label>

    <input type="text" class="form-control"
            required
            [(ngModel)]="model.name"
LOOK-HERE:  name="name"
            #name="ngModel">

        <div [hidden]="name.valid || name.pristine"
                class="alert alert-danger">
            Name is required
        </div>

    </div>
</div>

【讨论】：