Question

我已经成功调用了它的API和数据，但是如果我读取变量，我会得到＆＃34; Undefined＆＃34; 。

调用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

仅在

之后为this.emp分配值

clEmployeesCount: Number = this.emp.length;

执行

未定义。

你可以移动

clEmployeesCount: Number = this.emp.length;

在订阅内或最初分配一个空数组

emp: EmployeeDetails[] = []

避免错误。将其转换为订阅是正确的方法。

在使用angular成功调用subscribe后获取Undefined

2 个答案: