Не назначать данные из API выборки

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

Спасибо за этот вопрос!

Я думаю, причина в асинхронном поведении Observable. В вашем случае данные из API будут переданы компоненту дважды.Первый раз после инициализации MainComponent и это будет пустой массив, как вы инициализировали в этой строке public planetList: Planet[] = [];, а второй после того, как вы получите результат ответа GET.Таким образом, после ngOnInit() перехвата ListComponent вы получите пустой массив.

Вы можете управлять этим случаем с помощью перехвата ngOnChange(), он будет вызываться дважды (после каждого изменения @Input() planetsList: Planet[]; параметр. Или вы можете использовать другой вариант - использовать async$ трубу.

Более подробное объяснение подхода асинхронной трубы можно найти здесь .

Answer 3

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

Здесь вы переназначаете массив planetsList на «[]», который является пустым.Просто сделайте Inlut () planetsList: Planet [];