代码之家  ›  专栏  ›  技术社区  ›  Fernando Aureliano

Angular:看不到函数内部的变量

  •  0
  • Fernando Aureliano  · 技术社区  · 4 年前

    我有一个组件,我把一些数据放在一个变量中 users 在另一个函数中读取它。当我在构造函数中打印这个变量并在控制台上打印时,我可以看到它,但当我在另一个函数中做同样的事情时,我得到了undefined。我已经尝试将其声明为私有和公共,并得到了相同的结果。

    如何声明此变量以在另一个方法中查看它?

    这是我的组件:

    import { tap, take, map } from 'rxjs/operators';
    ...
    
    export class SharedProofsComponent implements OnInit {
    
      page = 1;
      pageSize = 4;
      collectionSize = COUNTRIES.length;
      countries: User[];
    
      users: User[];
    
      constructor(private firestore: AngularFirestore) {
    
        this.firestore.collection<User>('users').valueChanges().pipe(take(1)).subscribe(users => {
        this.users = users;
        // console.log(this.users);
        this.refreshCountries();
        });
    
      }
    
      refreshCountries() {
        console.log("USERS:");
        console.log(this.users); // here I got undefined
    
        this.countries = this.items
          .map((country, i) => ({id: i + 1, ...country}))
          .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
    
      }
    
      ngOnInit(): void {
      }
    
    }
    

    编辑:

    如果我在函数中加入一个静态常数,我就可以得到数据:

    this.countries = COUNTRIES
      .map((country, i) => ({id: i + 1, ...country}))
      .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
    

    但如果我这样做:

       this.countries = this.items
      .map((country, i) => ({id: i + 1, ...country}))
      .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
    

    我得到了错误:

    类型“Observable”上不存在属性“map”<用户[]>'。 .map((国家,i)=>({id:i+1,…国家})

    3 回复  |  直到 4 年前
        1
  •  3
  •   JerryLee    4 年前

    在获取数据之前调用方法,并且异步获取用户。当你打电话的时候 refreshCountries 没有任何数据 users 变量。

    应该工作

    this.firestore.collection<User>('users').valueChanges().pipe(take(1)).subscribe(users => {
        this.users = users; // get users
        this.refreshCountries(); // call method
    });
    
        2
  •  3
  •   illusion    4 年前

    添加 this.refreshCountries(); 在订阅回调中,这样。它变成:

    this.firestore.collection<User('users').valueChanges().pipe(take(1)).subscribe(users => {
      this.users = users;
      this.refreshCountries()
    });
    
        3
  •  1
  •   David    4 年前

    你必须小心,因为当你在构造函数方法中使用firestore中的订阅获取数据时,这是一个异步调用。如果在解析请求之前使用refreshCountries函数,则无法正确看到结果。