Question

我正在从服务中的api获取数据。我的问题是列表组件中的console.log(this.planetsList);是空数组。为什么？

这是我的代码服务：

export class ListService {
      listUrl = 'https://swapi.co/api/planets';
      constructor(private http: HttpClient) {}

      getList(): Observable<Dummy> {
        return this.http.get<Dummy>(this.listUrl);
      }
    }

主要组件：

export class MainComponent implements OnInit {
  public planetList: Planet[] = [];

  constructor(private listService: ListService) {}

  ngOnInit() {
    this.listService.getList().subscribe(list => {
      this.planetList = list.results;
    });
  }

HTML：

<app-list [planetsList]="planetList"></app-list>

列表组件：

export class ListComponent implements OnInit {
  @Input() planetsList: Planet[] = [];

  ngOnInit() {
    console.log(this.planetsList);
  }
}

感谢提前答复！

Answer 1

显示空白，因为最初没有任何数据。 ngOnInit方法仅调用一次。因此，在这里您必须使用 ngOnChanges事件。


export class ListComponent implements OnInit {
  @Input() planetsList: Planet[] = [];

  ngOnInit() {
    console.log(this.planetsList);
  }
 ngOnChanges(changes: SimpleChanges) {
  // changes.prop contains the old and the new value...
}

Answer 2

Input() planetsList: Planet[ ] = [ ];

在这里，您正在将planetsList数组重新分配为“ []”，该数组为空。做就是了 Inlut（）planetsList：Planet [];

Answer 3

感谢您的提问！

我认为Observable的原因是异步行为，在这种情况下，来自API的数据将两次传递给组件。第一次MainComponent初始化之后，它将是在此行public planetList: Planet[] = [];中初始化的空数组，第二次是获得GET响应的结果之后的第二个数组。因此，在ngOnInit()的{{1}}钩之后，您将获得一个空数组。

您可以使用ListComponent钩子来管理这种情况，它将被调用两次（每次更改ngOnChange()参数之后。也可以使用其他选项-使用@Input() planetsList: Planet[];管道。

您可以找到有关异步管道方法here的详细说明。

不要从提取API分配数据

3 个答案: