Javascript 角度：无法读取属性'；forEach&x27；未定义的问题（即使应定义）

我试图访问users组件中的用户数据，我调用logUsers（）将用户数据打印到控制台。以下是我的组件：

import { Component, OnInit } from '@angular/core';
import { GetDbDataService} from '../get-db-data.service';
import { User } from '../user';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users: User[];
  constructor(private getDbDataService: GetDbDataService) { }

  ngOnInit() {
    this.getUsers();
    this.logUsers();
  }

  getUsers(): void {
    this.getDbDataService.getUsers()
    .subscribe(users => this.users = users);
  }

  logUsers(): void{
    this.users.forEach((User) =>{
      console.log("id: " + User.id + " password: " + User.password);
    })
  }
}

我的getDbDataService如下所示：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of }  from 'rxjs';
import { User } from './user';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class GetDbDataService {

  private usersURL = 'api/users'; 
  constructor(private http: HttpClient) { }

  getUsers (): Observable<User[]> {
    return this.http.get<User[]>(this.usersURL)
      .pipe(
        tap(_ => this.log('fetched users')),
        catchError(this.handleError<User[]>('getUsers', []))
      );
  }

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

  private log(message: string) {
    console.log(message)
  }
}

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Observable, of }  from 'rxjs';
import { delay } from 'rxjs/operators';
import { User } from './user';

// documentation: https://github.com/angular/in-memory-web-api/blob/master/README.md

@Injectable({
  providedIn: 'root'
})

export class InMemoryDataService implements InMemoryDbService{

  createDb() {
    const users: User[] = [
      { id: 'email@email.com', password: 'test' },
      { id: 'gmail@gmail.com', password: 'test' },
      // id represents email here but is necessary, as the web api assumes that every data base
      // has a primary key called id
    ];

    // default returnType
    let returnType  = 'object';
    // let returnType  = 'observable';
    // let returnType  = 'promise';

    switch (returnType) {
      case ('observable'):
        return of({ users }).pipe(delay(10));
      case ('promise'):
        return new Promise(resolve => {
          setTimeout(() => resolve({ users }), 10);
        });
      default:
        return { users };
    }
  }
}

---

因为我在users.component.ts中的getUsers（）之后调用logUsers（），所以我不明白为什么用户应该是未定义的，为什么会出现错误。多谢各位

在异步调用中获取用户。您需要在subscribe中调用logUsers，我已经修改了代码

import { Component, OnInit } from '@angular/core';
import { GetDbDataService} from '../get-db-data.service';
import { User } from '../user';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users: User[];
  constructor(private getDbDataService: GetDbDataService) { }

  ngOnInit() {
    this.getUsers();

  }

  getUsers(): void {
    this.getDbDataService.getUsers()
    .subscribe(users => {this.users = users;
  this.logUsers();
});
  }

  logUsers(): void{
    this.users.forEach((User) =>{
      console.log("id: " + User.id + " password: " + User.password);
    })
  }
}

• 您正在尝试访问用户（未定义），而不向其分配值 信息技术用户应初始化为[]

• getDbDataService是可观察的，因此将调用logUsers（） 将值分配给用户之前

---

@Silvermind不不，当然不-这只是为了测试我的代码-我会将它们存储在加密数据库中。非常感谢！特别是快速反应！谢谢你向我解释这件事！

this.getDbDataService.getUsers()
.subscribe((users) => {
  this.users = users;
  this.logUsers();
});