时间戳

首页 > 解决方案 > 获取数组Http Client有值但在Angular 9上未定义的组件中的值

angular - 获取数组Http Client有值但在Angular 9上未定义的组件中的值

问题描述

获取数组Http Client有值但在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

标签： angular

解决方案

尝试这个：

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”值。

推荐阅读