'void'类型中不存在属性'filter'。在角度

时间:2017-12-20 12:57:49

标签: angular

我希望在Promises返回值后执行过滤器,从服务获取值但无法进一步执行。

过滤,地图上没有任何内容适用于它。这里有什么问题,或者我们无法从退回的服务功能中应用过滤器。 任何建议

错误:属性'过滤器'在'void'类型中不存在。

这是我的服务。

loadUsers() {
    fetch('http://api.icndb.com/jokes/')
        .then((response) => {
            return response.json();
         }).then((data) => {
             this.values = data
             console.log(data);
         }).catch((ex) => {
             console.error('Error fetching users', ex);
    });
}

然后在我的component.ts

export class SignUpComponent implements OnInit {
    ngOnInit() {
        this.newService.loadUsers().filter(res => res.id == '1');
    }

    constructor(private newService: MyDataService) { }
}

3 个答案:

答案 0 :(得分:4)

承诺。函数loadUsers()包含一个承诺。您需要先退回承诺:

loadUsers() {
  return fetch('http://api.icndb.com/jokes/')
  .then((response) => {
    return response.json();
  }).then((data) => {
    this.values = data
    console.log(data);
    return data;
  }).catch((ex) => {
    console.error('Error fetching users', ex);
  })
}

然后,

ngOnInit() {
    this.newService.loadUsers().then(function(users) {
        users.filter(res => res.id == '1');
    })
}

loadUsers()返回一个promise,而不是像常规函数那样的值。这意味着,loadUsers()需要时间来完成。如果是这样,promise对象包含现在解析的值。您可以使用<Promise object>.then()提取此值,该值将函数作为参数。您传递给.then(在本例中为用户)的函数的参数包含您要查找的内容。

答案 1 :(得分:1)

首先你的函数loadUsers不返回任何东西,你应该写:return fetch('http://api.icndb.com/jokes/')...,除此之外我不确定我们承诺有过滤方法。 可以这样做:

    loadUsers() {
  return fetch('http://api.icndb.com/jokes/')
  .then((response) => {
    return response.json();
  }).then((data) => {
    this.values = data
    return data;
  }).catch((ex) => {
    console.error('Error fetching users', ex);
  })
}
ngOnInit() {
    this.newService.loadUsers()
            .then(res => {
               res.filter(res => res.id == '1');
            })

}

答案 2 :(得分:0)

继续其他答案,你的json响应是object,filter是Array方法。 json响应包含value属性,它是对象数组。看到plnkr

export class App {
  loadUsers() {
  return fetch('https://api.icndb.com/jokes/')
  .then((response) => {
    return response.json();
  }).then((data) => {

    return data.value;
  }).catch((ex) => {
    console.error('Error fetching users', ex);
  })
}

Demo