* ngДля поведения_Субъект | asyn c не обновляется - PullRequest
Новая
       15

* ngДля поведения_Субъект | asyn c не обновляется

0 голосов
/ 01 апреля 2020

У меня проблема с BehaviorSubject и asyn c pipe. Он не показывает мне все элементы BehaviorSubject после .next (). Это показывает мне только пункт «Прова». Я зарегистрировал ошибки $ в перехватчике, и у меня есть другие элементы. Почему это не показывает мне все элементы на странице? Спасибо

шаблон 

<div class="alerts">
    <div class="alert" *ngFor="let error of (errorInterceptor.errors$ | async) ">
        {{error}}
    </div>
</div>

ошибка-перехватчик 

@Injectable({ providedIn: 'root' })

export class ErrorInterceptor implements HttpInterceptor {

errors$ = new BehaviorSubject<string[]>(['prova']);

    constructor() {} 

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        return next.handle(request).pipe(catchError(err => {
            if (err.status >= 400 && err.status < 500) {

                console.error('error-interceptor:error status=' + err.status + ' message=' + err.message + ' msg='+err.msg);
                const errors = [...this.errors$.value];
                errors.push(err.status);
                this.errors$.next(errors);
                console.table(this.errors$.value);

            } else {

                console.error('error-interceptor:err=' + err.error + ' statusText=' + err.statusText + ' status:' + err.status);

            }

            const error = err.error.msg || err.statusText;
            return throwError(error);

        }));

    }

}

1 Ответ

1 голос
/ 01 апреля 2020

верно, потому что значение - это то, что вы передаете .next. Если вы хотите собрать все ошибки, вам нужно изменить код на что-то вроде 

errors$.next([...errors$.value, newError]);

. Возможное решение - создать токен и поделиться BehaviourSubject. 

providers: [
  {
    provide: 'errors',
    useValue: new BehaviorSubject(['prova']),
  },
],
* 1008. * затем в коде вашего компонента вместо внедрения ErrorInterceptor введите @Inject('errors') public readonly errors$: Observable<string[]>.

и обновите Перехватчик, чтобы сделать то же самое. 

constructor(@Inject('errors') protected readonly errors$: BehaviorSubject<string[]>) {} 
// ....
this.errors$.next(errors);

после этого в шаблоне вы можете используйте 

<div class="alerts">
    <div class="alert" *ngFor="let error of (errors$ | async) ">
        {{error}}
    </div>
</div>
...