错误错误：InvalidPipeArgument：＆＃39; 10＆＃39; for pipe＆＃39; AsyncPipe＆＃39;

Question

我收到HTTP响应并需要显示数组的长度（该数组被称为＃39; Notifications＆＃39;）。我需要显示＆＃34; 10＆＃34;这是长度，但我现在正在展示：NaN

我的控制台中显示的错误：ERROR错误：InvalidPipeArgument：＆＃39; 10＆＃39; for pipe＆＃39; AsyncPipe＆＃39;

请在下面找到我的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;
}

非常感谢你。

Answer 1

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);
}

Answer 2

请找我的控制台日志：

Console