Выполнить Наблюдаемый по условию в Angular 7 - PullRequest
Новая
       6

Выполнить Наблюдаемый по условию в Angular 7

0 голосов
/ 09 января 2020

Я хотел бы выполнить вызов API только в том случае, если условие true в *ngIf="auth.isLoggedIn(); else anonymousUser": однако вызов API для сервера выполняется даже auth.isLoggedIn(), возвращает false.

navbar. html : 

<ng-container *ngIf="auth.isLoggedIn(); else anonymousUser">                  
    <li *ngIf="appUser$ | async as anUser">
        {{ anUser?.name }}
    </li>
</ng-container>

navbar.ts 

export class NavbarComponent implements OnInit {
    appUser$: Observable<AppUser>;      

    constructor(private userService: UserService,
                private auth: AuthService) {
    }

    async ngOnInit() {
        this.appUser$ = this.userService.get();     
    }
}

auth.service.ts: 

@Injectable({
  providedIn: 'root'
})
export class AuthService {
    public isLoggedIn() {
    const token = localStorage.getItem('authToken');
    if (token !== 'undefined' && !this.jwtHelper.isTokenExpired(token)) {
      return true;
    }
    return false;
  }    
}

user.service.ts: 

@Injectable({
  providedIn: 'root'
})
export class AuthService {
    get(): Observable<AppUser> {
        return super.getById(localStorage.getItem('userId'))
            .pipe(map(s => ( {id: s.id, name: s['userName']
                              , isAdmin: s['isAdmin']})));
    }
}

Не могли бы вы сказать мне, как я могу выполнить вызов API, когда только auth.isLoggedIn() возвращает true?

1 Ответ

3 голосов
/ 10 января 2020

Можно рассмотреть использование оператора Rx JS filter() (не путать с методом JavaScript Array.filter () ). В соответствии с документацией он будет

излучать значения, которые соответствуют предоставленному условию.

Следовательно, это будет гарантировать, что наблюдаемое будет только выполнено, только если условие (isLoggedIn возвращает true) выполнено. 

ngOnInit() {
  this.appUser$ = this.userService.get()
    .pipe(
      filter(auth.isLoggedIn()),
    );     
}
...