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

Question

我有一个 returns 一个 JSON 对象的服务，我想将此数据分配给一个接口属性。这是以下代码，此处的 component.ts 代码已被精简为仅包含相关部分。

Service.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');
  }
}

Component.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 是一个属性，它在您的 class (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 值。在这里你应该将服务响应值分配给 fanSpeedCard 的 content 属性.

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

Component.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) {}
}

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

How to assign value to interface property from http/async call in Angular?

javascript

subscribe

typescript

ngoninit

angular

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

How to assign value to interface property from http/async call in Angular?

javascript

subscribe

typescript

ngoninit

angular

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