使用订阅将数据保存在角度 8 中 [重复]答案

【问题标题】：Saving data in angular 8 with subscribe [duplicate]使用订阅将数据保存在角度 8 中 [重复]
【发布时间】：2023-11-24 08:08:02
【问题描述】：

您好，我在使用 Angular 8 保存数据时遇到问题。

当我做这个时this.service.getAll().subscribe(response => console.log(this.itemList = response))

并打印 itemList 数组为空，我尝试在订阅中打印响应并且响应有数据。

我尝试以这种方式在本地数组的订阅和打印中进行打印：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ItemService } from 'src/service/item.service';
import { Item } from 'src/DTO/item';

@Component({
  selector: 'app-crafting-dashboard',
  templateUrl: './crafting-dashboard.component.html',
  styleUrls: ['./crafting-dashboard.component.css']
})
export class CraftingDashboardComponent implements OnInit{
  itemList: Item[] = [];

  constructor(private router: Router, protected service: ItemService) {
  }

  ngOnInit() {
    this.service.getAll().subscribe(response => console.log("Reponse:" + response));
    console.log("Constrol print" + this.itemList);
  }

  getAll(){

  }

}

我注意到在控制台中首先出现 console.log("Control print" + this.itemList); 并在订阅打印后。可能是这个问题？！？！？

这是我的服务（我创建了一个抽象服务，并在特定服务中添加了实体的特定方法：

import { Service } from './service';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

export class AbstractService<DTO> implements Service<DTO> {
    type: string = '';
    port: string = '8080';

    constructor(protected http: HttpClient){}

    getAll(): Observable<DTO[]> {
        return this.http.get<DTO[]>('http://localhost:' + this.port + '/' + this.type + '/getAll');
    }

    read(id: number): Observable<DTO> {
        return this.http.get<DTO>('http://localhost:' + this.port + '/' + this.type + '/read?id=' + id);
    }

    insert(dto: DTO): Observable<DTO> {
        return this.http.post<DTO>('http://localhost:' + this.port + '/' + this.type + '/insert', dto);
    }

    update(dto: DTO): Observable<DTO> {
        return this.http.put<DTO>('http://localhost:' + this.port + '/' + this.type + '/update', dto);
    }

    delete(id: number): Observable<any> {
        return this.http.delete('http://localhost:' + this.port + '/' + this.type + '/delete?id=' + id);
    }


}

后端是java用spring写的

【问题讨论】：

我发布的服务是一个特定的服务，抽象 id this
可能是这个问题？！？！？：当然是。如果该服务可以同步返回您的数据，那么它就不会用 observable 来打扰您。它将直接返回一个数据数组。可观察对象的全部意义在于处理异步。 AJAX 中的 A 表示异步。您发送了一个请求，然后执行其他操作。很久以后，当响应最终可用时，将使用响应调用订阅回调。
exixst 在执行所有其他操作后等待响应 e 的方法？
没有。您订阅，然后对传递给订阅的回调内部的响应做您需要做的事情。

标签： javascript angular observable angular8 observer-pattern

【解决方案1】：

在这段代码中：

ngOnInit() {
    this.service.getAll().subscribe(response => console.log("Reponse:" + response));
    console.log("Constrol print" + this.itemList);
}

回调response => console.log("Reponse:" + response)被延迟，在收到HTTP响应时执行。这解释了您观察到的行为（“控制打印”显示在“响应：”之前）。

如果您必须对收到的数据进行处理，请在回调中进行，而不是在ngOnInit：

this.service.getAll().subscribe(response => {
    console.log("Reponse:" + response);
    //Whatever you want to do with the response and the variables assigned to the response goes here
});

【讨论】：

【解决方案2】：

这样做

this.service.getAll().subscribe(response => {
    this.itemList=response;
    console.log("Console print" + this.itemList);
});

【讨论】：