Typescript循环不起作用

Question

我正在尝试迭代一个数组，但Angular拒绝介入它......

正在按如下方式填充数组。如您所见，我将其打印到控制台中，我可以看到该阵列已初始化并已填充。

export class CarDetailsComponent implements OnInit, AfterViewInit {
  cars: Array<Car>;

  constructor(private carService: CarService) {}

  ngOnInit() {
      this.cars = this.carService.getCars();
      console.log(this.cars);
  }
}

该数组将被用于ngAfterViewInit()。出于调试目的，我做的第一件事是检查数组是否正常。它是。但是，循环中的console.log永远不会被调用。为什么呢？

ngAfterViewInit() {
  console.log(this.cars);
  for (let i in this.cars) {
    console.log(i);
  }
}

我也试过for..of，this.cars.slice()，一切似乎都没问题......

编辑（在评论中解决一些建议）

我添加了两个日志建议，它们显示数组为空。我附上了一个打印屏幕，显示console.log(this.cars)显示的是有效数组，但this.cars.length和JSON.stringify(this.cars)没有。

由于我是菜鸟，我不知道为什么会出现这种情况。可能与@Ayman和@Codeepic所指出的相关。

编辑2

关于@Minko问题，我认为它是同步的。它看起来像：

  getCars(): Array<Car> {
    var cars: Car[] = [];
    this.http.get('//localhost:8080/cars).subscribe(data => {
      for (let entry of <Array<any>>data) {
        cars.push(entry);
      }
    });
    return cars;
  }

Answer 1

carService.getCars()方法是异步的。 ngAfterViewInit在呈现模板后但在carService.getCars()返回任何结果之前运行。这就是为什么你没有在for循环中看到console.log的原因。

Answer 2

这是因为您正在进行http调用（获取），在获得答案之前，您尝试使用响应对象，将您的逻辑放在订阅中。

Answer 3

你的方法

getCars(): Array<Car> {
    var cars: Car[] = [];
    this.http.get('//localhost:8080/cars).subscribe(data => {
      for (let entry of <Array<any>>data) {
        cars.push(entry);
      }
    });
    return cars;
  }

很可能总是返回一个空数组。 那是因为http请求需要一段时间才能从服务器获取汽车。 此外，因为您可以在javascript中调用异步调用，所以它不会等到它得到结果并返回它。

要等到阵列填满，你可以使用Promises。

getCars(): Promise<Car[]> {
    return new Promise (allLoadedFromServer => {
      var cars: Car[] = [];
      this.http.get('//localhost:8080/cars).subscribe(data => {
        for (let entry of <Array<any>>data) {
          cars.push(entry);
        }
        allLoadedFromServer(cars);
      });
    }
  }

现在您可以通过以下方式访问数据：

ngAfterViewInit() {
  this.getCars().then(data=>{
     this.cars = data;
     for (let i of this.cars) {
       console.log(i);
     }
   );
}

应该给你预期的结果。 希望它有所帮助