Блог

Главная - Вопросы по программированию - http-клиент get array имеет значение, но значение в компоненте не определено в Angular 9

http-клиент get array имеет значение, но значение в компоненте не определено в Angular 9

#angular

#angular

Вопрос:

http-клиент get array имеет значение, но значение в компоненте не определено в Angular 9

мое значение не определено

это мой сервис

 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RequestService {

  constructor(private http: HttpClient) { }
  private address = 'http://localhost:8080/request';

  public getAll<T>(): Observable<T> {
    return this.http.get<T>(this.address);
  }
}

это мой файл components.ts

 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { RequestService } from './request.service';

@Component({
  selector: 'app-table-request',
  templateUrl: './table-request.component.html',
  styleUrls: ['./table-request.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableRequestComponent implements OnInit {
  dataList!: [];
  constructor(private rs: RequestService) {
    this.loadData();
    console.log(this.dataList)//this is console.log
  }
  ngOnInit(): void {

  }
  loadData() {
    this.rs.getAll().subscribe((res: any) => {
      this.dataList = res;
    });
  }
}

это результат из console.log
https://i.stack.imgur.com/51YPh.png

Комментарии:

1. Вместо вызова метода loadData() в конструкторе попробуйте вызвать его в oninit().

2. dataList Переменная назначается асинхронно, и вы не можете получить к ней доступ синхронно. Любые инструкции, которые напрямую зависят от него, должны быть внутри подписки. Другими словами, подпишитесь на getAll() observable, где требуется его ответ.

Ответ №1:

Вы вызываете console.log перед возвратом вызова API, попробуйте изменить его на:

 loadData() {
  this.rs.getAll().subscribe((res: any) => {
    this.dataList = res;
    console.log(this.dataList);
  });
}

Комментарии:

1. Это работает. Но значение в dataList все еще не определено. Я не знаю, как это исправить

2. Что такое datalist! Разве это не должен быть список данных?

Ответ №2:

Попробуйте это:

 export class TableRequestComponent implements OnInit {
  dataList: [];
  constructor(private rs: RequestService) {        
  }
  ngOnInit(): void {
    this.loadData();        
  }
  loadData() {
    this.rs.getAll().subscribe((res: any) => {
      this.dataList = res;
      console.log(this.dataList)//this is console.log
    });
  }
}

И привяжите свой «dataList» к вашему дисплею (например, к таблице). Вы можете прочитать больше об асинхронном вызове, чтобы узнать, почему вы не можете получить значение «datatList» за пределами «subscribe».