Блог

Главная - Вопросы по программированию - Данные состояния не изменяются с помощью ngRx

Данные состояния не изменяются с помощью ngRx

#angular #ngrx

#угловые #ngrx

Вопрос:

Я пытаюсь отобразить компонент на основе значения в хранилище.

login-component.html

 <html>
<body>
  <div class="box" *ngIf="!isLoggedIn$ | async">
    <h1>Login</h1>

    <input [value]="username" (input)="username = $event.target.value" class="email">

    <input [value]="password" (input)="password = $event.target.value" class="password">

    <div class="btn" (click)="login()">Sign In</div>
  </div>
</body>
</html>
<router-outlet></router-outlet>

login-component.ts

 @Component ( {
  selector :'app-login' ,
  templateUrl :'./login.component.html',
  styleUrls :['./login.component.css']
})
export class LoginComponent implements OnInit {
  username: string = 'username';
  password: string = 'password';
  isLoggedIn$ : Observable<boolean>;

  constructor (private store: Store<AppState> , private route: Router) {
  }

  ngOnInit () {
    this.isLoggedIn$ = this.store.pipe(map(state=> state.auth.loggedIn));
  }

  login () {
    if (this.username === 'Iftekhar' amp;amp; this.password === 'Sunny') {
      const user: User = {
        'id' :1 ,
        'name' :'Iftekhar'
      };
      this.store.dispatch ( new LoggedInAction ( {user} ) );
    }
  }
}

Страница входа в систему будет отображаться на основе значения LoggedIn из хранилища. Здесь флаг не устанавливается в методе ngOnInit().
Изначально мое хранилище будет пустым, когда пользователь перейдет на — localhost:4200.
Может кто-нибудь, пожалуйста, скажите мне, что я делаю не так.

Весь код можно найти здесь — https://github.com/training-session-101/Angular6

Ответ №1:

попробуйте вставить круглые скобки в async 

 <div class="box" *ngIf="!(isLoggedIn$ | async)">

Комментарии:

1. использование круглой скобки правильно устанавливает значение при первой загрузке приложения. Но после того, как я нажму на submit значение isLoggedIn $ не изменяется, и, таким образом, страница входа в систему по-прежнему остается там.