代码之家 › 专栏 › 技术社区 › inhaq

将会话存储值更改为未定义应该会影响ngif,而不必单击两次

session-storage angular-ng-if angular javascript

inhaq · 技术社区 · 6 年前

当我单击按钮时(它应该使会话存储变量未定义,以便在其他组件中ngif变为false,div不再显示),它第一次不起作用。但当我再次点击它的工作和该div变得隐藏。

这是我的方法。

第一个组件(此组件显示第一个组件,我首先单击按钮,然后显示第二个组件):

//TS part
@SessionStorage() count: any;

onClick(){
this.count = "Any value";
}

<!-- HTML part-->
<button *ngIf="!count" (click)="onClick()">Click</button>

第二部分:

//TS part
@SessionStorage() count: any;

onClick(){
this.count = undefined;
}

<!-- HTML part-->
<button *ngIf="count" (click)="onClick()">Click</button>

在第二个组件中,我必须单击两次才能转到第一个组件。我不知道问题在哪里。

2 回复 | 直到 6 年前

castillo.io 6 年前

这是因为在第二个组件中 count 最初未定义,然后单击后,它将其值设置为未定义,不会导致任何更改。

如果是,请确保使用当前计数初始化其值:

constructor(private sessionStorageService: SessionStorageService) {
  this.count = this.sessionStorageService.get('count');
}

下面是一个演示: https://stackblitz.com/edit/angular-puzknw?file=src/app/two/two.component.ts

这应该可以做到,但您可能应该为此使用一个服务,并将其注入每个组件。

Rohith K P 6 年前

看起来我们需要使用sessionStorageService set()方法来更新count变量。

this.sessionStorageService.set('count', "Any value");

您可以在下面这样的其他组件中使用该变量

private count; 
this.count = this.sessionStorageService.get('count');

or   @SessionStorage() count: any;

https://angular-3izdz8.stackblitz.io

推荐文章

Matias Diez · 当变量设置为0时,*ngIf为什么不起作用?

7 年前

David · *ngIf在应用数据绑定后显示和隐藏div不再工作

7 年前

user1449456 · ng if='false'隐藏DIV

7 年前

Sampgun · Angular 4“Heroes tutorial”与“templateUrl”和“NgIf”绑定问题

7 年前

ricardol · 如果内部ng repeat未过滤我的数组,则为ng

7 年前

BrS · 角度2,在ngFor中使用带条件的ngClass

7 年前

Ali · 引导AngularJS如果没有li则隐藏ul

8 年前

Andrew · 比较AngularJS指令中的两个整数

9 年前