ОШИБКА Ошибка: InvalidPipeArgument: «10» для канала «AsyncPipe» - PullRequest
Новая
       20

ОШИБКА Ошибка: InvalidPipeArgument: «10» для канала «AsyncPipe»

0 голосов
/ 01 июня 2018

Я получаю ответ HTTP и мне нужно отобразить длину массива (массив называется «Уведомления»).Мне нужно отобразить «10», что является длиной, но это то, что я сейчас отображаю: NaN

Ошибка, отображаемая в моей консоли: Ошибка: InvalidPipeArgument: '10'для трубы 'AsyncPipe'

Пожалуйста, найдите мой HTML-код ниже: 

        <a href="#" class="dropdown-toggle dk" data-toggle="dropdown">
        <i class="fa fa-bell"></i>
        <span class="badge badge-sm up bg-danger m-l-n-sm count" id="notcountbadge">{{cfNotificationsLength | async}}</span>
    </a>

и мой код TS ниже: 

public cfNotificationsLength: Observable<number>;
public cfNotifications: any;

ngOnInit() {
    console.log("HeaderBarComponent loaded successfuly!");

    this.referenceDataService.fetchNotifications(token)
        .subscribe((x: any) => {
            this.cfNotifications = x.Notifications;
            this.cfNotificationsLength = x.Notifications.length;
            console.log("cfNotifications", this.cfNotifications);
            console.log("cfNotificationsLength", this.cfNotificationsLength);
        },
            (err: any) => console.log("error", err)
        );

}

и мой сервис ниже: 

constructor(private http: HttpClient) {
    super(null);
}

public fetchNotifications(token: string): Observable<any> {
    //console.log("token in fetchNotifications", token);
    this.BASE_URL = window.location.origin;

    let fetchcfNotificationsCallResult = this.http
        .get(`${this.BASE_URL}` + `/` + token + `/api/Notifications`)
        .pipe(
            map((response: any) => <any>response)
        );

    return fetchcfNotificationsCallResult;
}

Большое спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Пожалуйста, найдите мои журналы консоли:

Консоль

0 голосов
/ 01 июня 2018

Канал async используется для Observables и поэтому не требуется, если вы задаете свойство, подписавшись на Observable.Просто удалите трубу, и она должна работать как положено.

Редактировать

Асинхронная труба может быть способом, попробуйте это: 

public cfNotifications: Observable<any>;

ngOnInit() {
    console.log("HeaderBarComponent loaded successfuly!");

    this.cfNotifications = this.referenceDataService
        .fetchNotifications(token)
        .map((x: any) => x.Notifications);
}

Сследующий html: 

<span class="badge badge-sm up bg-danger m-l-n-sm count" id="notcountbadge">
    {{(cfNotifications | async)?.length}}
</span>
...