Javascript 如何在Angular中从http/async调用为接口属性赋值?
我有一个返回JSON对象的服务,我想将此数据分配给接口属性。下面是以下代码,这里的component.ts代码已被剥离,仅包含相关部分 Service.ts文件Javascript 如何在Angular中从http/async调用为接口属性赋值?,javascript,angular,typescript,subscribe,ngoninit,Javascript,Angular,Typescript,Subscribe,Ngoninit,我有一个返回JSON对象的服务,我想将此数据分配给接口属性。下面是以下代码,这里的component.ts代码已被剥离,仅包含相关部分 Service.ts文件 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class ApiService { constru
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');
}
}
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) {}
}
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) {}
}
Component.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');
}
}
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) {}
}
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) {}
}
我在ngOnInit()函数中放了一个console.log,可以看到正确的值,但由于某些原因,它没有正确地分配给接口属性,因此在UI中为空。感谢您的指导。在您的代码中,fanSpeedCard是一个属性,它是在您的类(仪表板组件)构建时为对象(带有CardSettings接口)指定的值:
fanSpeedCard: CardSettings = {
content: this.fanSpeed
};
由于最初未定义fanSpeed(仅类型为字符串),并且由于您未在API响应中更新CardSettings对象,所以您的UI不会更改
如评论中所述,您需要确保更新订阅块中CardSettings内容属性的值(不仅仅是fanSpeed):
您没有在ngOnInit()中正确更新
fanSpeedCard
的content
porperty值。在ngOnInit()中,您重新分配了this.fanSpeed值。在这里,您应该将服务响应值分配给fanSpeedCard
的content
属性
以下解决方案将解决您的问题
Component.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');
}
}
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) {}
}
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) {}
}
fanSpeedCard
立即运行。但是API调用需要时间才能得到解决。您可以在订阅区块内分配fanSpeedCard
值这是否回答了您的问题?谢谢你的解释,谢尔盖!它现在工作得很好。