Question

我正在尝试根据商店中的值显示组件。

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' && this.password === 'Sunny') {
      const user: User = {
        'id' :1 ,
        'name' :'Iftekhar'
      };
      this.store.dispatch ( new LoggedInAction ( {user} ) );
    }
  }
}

将基于商店中的loginIn值显示登录页面。此处未在ngOnInit（）方法中设置该标志。最初，当用户转到-localhost：4200时，我的商店将为空。谁能告诉我我在做什么错。

完整代码可在此处找到-https://github.com/training-session-101/Angular6

Answer 1

尝试将括号放在异步

上

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

ngRx不会更改状态数据

1 个答案: