Question

在成功调用 angular 后获取未定义

2018-03-23

14240

angular typescript

我已成功调用 API 并从中获取数据，但是如果我读取变量，则会得到 “未定义” 。

调用 api 获取数据的服务类

export class DataServiceService {

   constructor(private http: Http) { }

   url: string = "http://localhost:60263/api/values";

   getEmployeesData(): Observable<EmployeeDetails[]> {
      return this.http.get(this.url).map((res: Response) => res.json());
   }
}

订阅数据

export class AppComponent {

   emp: EmployeeDetails[];

   constructor(private dataServe: DataServiceService) { }

   ngOnInit() {
     this.dataServe.getEmployeesData().subscribe(res => this.emp = res);
   }

   clEmployeesCount: Number = this.emp.length; **Getting undefined here**
   clShowEmployee: boolean = false;
   clCreateEmployee: boolean = false;
}

但是这在 HTML 部分运行良好

<div *ngIf="emp">
  <ul *ngFor="let user of emp">
   <li>{{user.ID}}</li>
 </ul>
</div>

Answer 1

由于这是异步调用，因此你无法知道何时返回。因此将赋值移至 subscribe 函数中

this.dataServe.getEmployeesData().subscribe(res =>  {
   this.emp = res;
   this.clEmployeesCount = emp.length;
});

Answer 2

只有在执行

clEmployeesCount: Number = this.emp.length;

Getting undefined here 之后，才会为 this.emp 分配值。

您可以移动

clEmployeesCount: Number = this.emp.length;

在 subscribe 内部，或者最初分配一个空数组

emp: EmployeeDetails[] = []

以避免错误。将其移动到 subscribe 中是正确的方法。