如何从Angular中的http / async调用为接口属性赋值？

Question

我有一个返回 JSON 对象的服务，我想将此数据分配给接口属性。这是下面的代码，这里的 component.ts 代码已被剥离，只包含相关部分。服务.ts 文件import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';@Injectable({  providedIn: 'root'})export class ApiService {  constructor(private httpClient: HttpClient) { }  public getFanSpeed(){    return this.httpClient.get('http://localhost:4000/auth/get-fan-speed');  }}组件.ts 文件import { Component, OnInit } from '@angular/core';import { ApiService } from '../../api.service';interface CardSettings {  content: string;}@Component({...})export class DashboardComponent implements OnInit {  fanSpeed: string;  ngOnInit() {    this.apiService.getFanSpeed().subscribe((response)=>{      this.fanSpeed = response['fanSpeedVar'];    });  }  fanSpeedCard: CardSettings = {    content: this.fanSpeed  };  constructor(private apiService: ApiService) {}}我在 ngOnInit() 函数中放置了一个 console.log，我可以看到正确的值，但由于某种原因，它没有正确分配给接口属性，因此在 UI 中只是空的。任何指导将不胜感激，谢谢。

Answer 1

在您的代码中，fanSpeedCard 是一个属性，它在您的类（DashboardComponent）构造时分配了对象的值（使用 CardSettings 接口） ：

fanSpeedCard: CardSettings = {

    content: this.fanSpeed

};

由于 fanSpeed 最初没有定义（仅作为字符串类型）并且由于您没有在 API 响应中更新 CardSettings 对象 - 您的 UI 不会更改。

如评论中所述，您需要确保更新订阅块内的 CardSettings 内容属性的值（不仅仅是 fanSpeed）：

gOnInit() {

    this.apiService.getFanSpeed().subscribe((response)=>{

      this.fanSpeed = response['fanSpeedVar'];

      this.fanSpeedCard.content = this.fanSpeed;

    });

}

Answer 2

您没有正确更新ngOnInit()fanSpeedCard中的content属性值。在ngOnInit()中，您重新分配了this.fanSpeed值。在这里，您应该将服务响应值分配给'属性。fanSpeedCardcontent

以下解决方案将解决您的问题。

组件.ts 文件

import { Component, OnInit } from '@angular/core';

import { ApiService } from '../../api.service';

interface CardSettings {

  content: string;

}

@Component({...})

export class DashboardComponent implements OnInit {

  fanSpeed: string;

  ngOnInit() {

    this.apiService.getFanSpeed().subscribe((response)=>{

      this.fanSpeed = response['fanSpeedVar']

      this.fanSpeedCard.content = this.fanSpeed;

    });

  }

  fanSpeedCard: CardSettings = {

    content: this.fanSpeed

  };

  constructor(private apiService: ApiService) {}

}