Question

我目前正在学习Angular，需要从本地服务器获取一些数据，但是，尽管我可以使用ngFor，但是当我尝试在代码中使用数组时，它似乎是空的。指令并正确显示。

我已经硬编码了以下数据：

// person-data.ts

export var PERSON_DATA = [
    {
        "vorname": "Adrian",
        "nachname": "Moos"
    },
    {
        "vorname": "Ferdinand",
        "nachname": "Hübner"
    }
];

这与我从本地主机（春季）收到的数据集完全相同。我正在使用提供的代码将数据放入表结构，该结构要求将数据放入另一个名为addressData的数组中，如下所示：

// person-list.component.ts

import {PERSON_DATA} from "./person-data";

addressData = [];

ngOnInit() {
    this.addressData = PERSON_DATA;
}

最后，我用ngFor指令将其放入表结构中，非常简单

  <li *ngFor="let p of addressData">
    {{p.vorname}} - {{p.nachname}}
  </li>

但是我不想使用硬编码的数据，我想使用来自服务器的数据，所以我要做的是：在ngOnInit函数中，我使用提供的{{1 }}来获取所有数据并将其放入一个单独的数组中，如下所示：

PersonService

现在发生的事情是，当我将// person-list.component.ts persons = []; addressData = []; constructor(private _personService: PersonsService) { } ngOnInit() { this._personService.getAll().subscribe(data => this.persons = data); this.addressData = this.persons; }指令与persons数组一起使用时，它可以工作，但是当我使用ngFor数组时，它无法工作。

addressData

但是

// this works

<li *ngFor="let p of persons">
    {{p.vorname}} - {{p.nachname}}
</li>

我在这里想念什么？

为什么不将数据分配给另一个数组？

Answer 1

您正在将this.addressData = this.persons;分配给订阅。其平均值this.addressData = this.persons;在数据来自this._personService.getAll()调用之前首先被执行。由于您需要在下面的订阅方法中分配this.addressData = this.persons;

this._personService.getAll().subscribe(data => {
    this.persons = data;
    this.addressData = this.persons;
});

希望这对您有帮助！

Observable分配的角数组为空

1 个答案: