Angular 2显示和隐藏一个元素

小开

最佳答案

你应该使用*ngIf指令

<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>




export class AppComponent implements OnInit{


(...)
public edited = false;
(...)
saveTodos(): void {
//show box msg
this.edited = true;
//wait 3 Seconds and hide
setTimeout(function() {
this.edited = false;
console.log(this.edited);
}.bind(this), 3000);
}
}

更新:当您在Timeout回调内时，您丢失了对外部作用域的引用。

所以添加.bind(this)，就像我上面添加的那样

Q: edited是一个全局变量。在* ngfor循环中你的方法是什么?——Blauhirn

答:我会将edit作为一个属性添加到我正在迭代的对象中。

<div *ngFor="let obj of listOfObjects" *ngIf="obj.edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>




export class AppComponent implements OnInit{
   

public listOfObjects = [
{
name : 'obj - 1',
edit : false
},
{
name : 'obj - 2',
edit : false
},
{
name : 'obj - 2',
edit : false
}
];
saveTodos(): void {
//show box msg
this.edited = true;
//wait 3 Seconds and hide
setTimeout(function() {
this.edited = false;
console.log(this.edited);
}.bind(this), 3000);
}
}

小开

根据你想要达到的目标，有两种选择:

你可以使用hidden指令来显示或隐藏一个元素

<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>

You can use the ngIf control directive to add or remove the element. This is different of the hidden directive because it does not show / hide the element, but it add / remove from the DOM. You can loose unsaved data of the element. It can be the better choice for an edit component that is cancelled.
```
<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
```

For you problem of change after 3 seconds, it can be due to incompatibility with setTimeout. Did you include angular2-polyfills.js library in your page ?

小开

根据你的需要，*ngIf或[ngClass]="{hide_element: item.hidden}"，其中CSS类hide_element是{ display: none; }

如果你正在更改状态变量*ngIf正在删除，*ngIf可能会导致问题，在这种情况下，需要使用CSS display: none;。

小开

我们可以通过使用下面的代码片段来实现。

角代码:

 export class AppComponent {
toggleShowHide: string = "visible";
}

HTML模板:

  Enter text to hide or show item in bellow:
<input type="text" [(ngModel)]="toggleShowHide">
<br>
Toggle Show/hide:
<div [style.visibility]="toggleShowHide">
Final Release Angular 2!
</div>

小开

当你不关心移除Html Dom-Element时，使用*ngIf。

否则，使用这个:

<div [style.visibility]="(numberOfUnreadAlerts == 0) ? 'hidden' : 'visible' ">
COUNTER: \{\{numberOfUnreadAlerts}}
</div>

小开

这是角指令的一个很好的用例。像这样的东西非常有用。

@Directive({
selector: '[removeAfter]'
})
export class RemoveAfter {
constructor(readonly element: ElementRef<HTMLElement>) { }
 

/**
* Removes the attributed element after the specified number of milliseconds.
*/
@Input() removeAfter: number;


ngOnInit() {
setTimeout(() => {
this.element.nativeElement.remove();
}, this.removeAfter);
}
}

用法:

<div [removeAfter]="3000">Removed after 3 seconds</div>

小开

子组件显示我正在使用*ngif="selectedState == 1"

而不是我使用[hidden]="selectedState!=1"

这对我很管用。正确地加载子组件以及在隐藏和取消隐藏子组件之后没有定义。

小开

@inoabrian上面的解决方案对我有用。我遇到了这样一种情况:刷新页面时，隐藏的元素会重新出现在页面上。下面是我解决这个问题的方法。

export class FooterComponent implements OnInit {
public showJoinTodayBtn: boolean = null;


ngOnInit() {
if (condition is true) {
this.showJoinTodayBtn = true;
} else {
this.showJoinTodayBtn = false;
}
}

小开

只要在setTimeout函数中添加bind ()，它就会开始工作

setTimeout(function() {
this.edited = false;
console.log(this.edited);
}.bind(this), 3000);

在HTML中改变

<div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>

来

<div *ngIf="edited" class="alert alert-success alert-dismissible fade in" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>

小开

在TS文件中

showMyContainer: boolean = false;

在HTML中

<button (click)="showMyContainer=!showMyContainer">Show/Hide</button>


<div *ngIf="showMyContainer">
your code
</div>

请看我的stackblitz

很高兴听到有人得到了帮助。