Question

我正在尝试将数据从REST API同步到我的UI。但是当我从Rest API获取记录并对其进行转换时，它给出了未定义的错误：我正在附上我的代码：-

 private datalist: Data[];
  private dataUpdated = new Subject<Data[]>();


  constructor(private http:HttpClient) { 



  }
  getData()
{
  this.http.get<{datalist:any}>("http://myserever/posts")
  .pipe(map((dummydata)=>{
    return dummydata.datalist.map(da=>{
      return {
        Status:da.status
      };
    })

  }))
    .subscribe(data=>{
    this.datalist=data
    console.log("The data is",data);
    this.dataUpdated.next([...this.datalist]);
     })
}

实际结果：- 在管道运算符上，它给了我未定义的错误，这是我的错误堆栈：-

ERROR TypeError: Cannot read property 'map' of undefined
    at MapSubscriber.eval [as project] (get-dummy-data.service.ts:25)
    at MapSubscriber._next (map.js:79)
    at MapSubscriber.Subscriber.next (Subscriber.js:95)
    at MapSubscriber._next (map.js:85)
    at MapSubscriber.Subscriber.next (Subscriber.js:95)
    at FilterSubscriber._next (filter.js:90)
    at FilterSubscriber.Subscriber.next (Subscriber.js:95)
    at MergeMapSubscriber.notifyNext (mergeMap.js:151)
    at InnerSubscriber._next (InnerSubscriber.js:25)
    at InnerSubscriber.Subscriber.next (Subscriber.js:95)

我如何解决以上问题谢谢

Answer 1

首先，您不是使用BehaviorSubject，而是使用Subject（区别在于，行为主体在初始化时有一个值，而Subject没有）。

此帖子恢复了差异What is the difference between Subject and BehaviorSubject?

这取决于您切换真实行为主题的需要。

错误"Cannot read property 'map' of undefined"可能是由于您的dummydata结果不包含数据列表属性（检查大小写，拼写吗？）

第一个映射将只获取请求（dummydata）的结果，然后第二个映射将尝试对dummydata.datalist属性（是数组，对象？）进行迭代。

因此您可以首先检查dummydata.datalist属性是否未定义，并且它是可迭代的。

您可以将代码修改为：

    getData(){
        this.http.get<{datalist:any}>("http://myserever/posts").pipe(
            map(dummydata => dummydata.datalist.map(da => {
                return {
                    Status: da.status
                }
            })),
            // Catch it here
            catchError(error => of([{Status: 'Fail'}]))
        ).subscribe(
            data => {
                this.datalist=data
                console.log("The data is",data);
                this.dataUpdated.next([...this.datalist]);
            },
            // Or catch it here
            err => {
                //Do your error handling
            },
            () => // Do something in any case
        )
    }

希望这可以为您提供帮助。

可观察到的行为问题

1 个答案: