gpt4 book ai didi

javascript - Angular 隐藏忽略

转载 作者:太空狗 更新时间:2023-10-29 16:54:04 25 4
gpt4 key购买 nike

我试图在 Angular2 中使用 Hidden 属性,当我包含一个改变 DIV 显示的样式时,隐藏属性将被忽略。

运行下面的代码时,会显示两个 div。当我删除类 .displayInline 时,第一个 DIV 被隐藏并显示第二个(如预期的那样)。

我可以同时使用 Hidden 和 display CSS 吗?

import {ComponentAnnotation as Component, ViewAnnotation as View, bootstrap, NgIf} from 'angular2/angular2';

@Component({
selector: 'hello'
})
@View({
template: `<style>.displayInline{ display:inline }</style><span *ng-if="name">Hello, {{name}}!</span>
<div>
<div [hidden]="hideDiv1()" class="displayInline">should be hidden.</div>
<div [hidden]="hideDiv2()" class="displayInline">should be displayed.</div>
</div>`,
directives: [NgIf]
})
export class Hello {
name: string = 'World';
constructor() {
setTimeout(() => {
this.name = 'NEW World'
}, 2000);
}

hideDiv1(){
return true;
}

hideDiv2(){
return false;
}
}

bootstrap(Hello);

存储库:https://github.com/albi000/ng2-play

最佳答案

我在使用 btn 类的 Bootstrap 时遇到了类似的问题

<button [hidden]="!visible" class="btn btn-primary">Click</button>

我通过添加解决了这个问题

[hidden] {
display: none;
}

在我全局使用的 css 样式表的末尾。这暂时解决了问题。

关于javascript - Angular 隐藏忽略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30744882/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com