错误错误:InvalidPipeArgument:' 10' for pipe' AsyncPipe'

时间:2018-06-01 09:38:27

标签: asynchronous angular5 observable

我收到HTTP响应并需要显示数组的长度(该数组被称为#39; Notifications')。我需要显示" 10"这是长度,但我现在正在展示:NaN

我的控制台中显示的错误:ERROR错误:InvalidPipeArgument:' 10' for pipe' 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 :(得分:0)

SELECT `Perm_id` FROM `bus_user_perms` 管道用于Observables,因此如果通过订阅Observable设置属性则不需要。只需移除管道,它应该按预期工作。

修改

异步管可能就是这样,试试这个:

async

使用以下html:

public cfNotifications: Observable<any>;

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

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

答案 1 :(得分:0)

请找我的控制台日志:

Console