Как присвоить значение свойству интерфейса из вызова http / async в Angular?

У меня есть служба, которая возвращает объект 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) {}
}

Я помещаю console.log в функцию ngOnInit (), и я вижу правильное значение, но по какой-то причине оно просто не назначается должным образом свойству интерфейса, поэтому в пользовательском интерфейсе просто пусто. Любое руководство будет оценено, спасибо.


typescript javascript angular subscribe ngoninit
person Controless    schedule 22.06.2020    source источник
comment
fanSpeedCard запускается мгновенно. Но для разрешения вызова API потребуется время. Вы можете присвоить значение fanSpeedCard внутри блока подписки   -  person bharat1226    schedule 22.06.2020
comment
Отвечает ли это на ваш вопрос? Как вернуть объект из службы в компонент в angular   -  person wentjun    schedule 22.06.2020

Ответы (2)


arrow_upward
1
arrow_downward

В вашем коде fanSpeedCard - это свойство, которому присваивается значение объекта (с интерфейсом CardSettings) в вашем классе (DashboardComponent) время построения:

fanSpeedCard: CardSettings = {
    content: this.fanSpeed
};

Поскольку fanSpeed ​​изначально не определен (только тип как строка) и поскольку вы не обновляете объект CardSettings внутри ответа API, ваш пользовательский интерфейс не изменяется.

Как упоминалось в комментарии, вам необходимо убедиться, что вы обновили значение свойства содержимого CardSettings внутри блока подписки (а не только fanSpeed):

gOnInit() {
    this.apiService.getFanSpeed().subscribe((response)=>{
      this.fanSpeed = response['fanSpeedVar'];
      this.fanSpeedCard.content = this.fanSpeed;
    });
}
person Sergey Rudenko    schedule 22.06.2020
comment
Спасибо за объяснение, Сергей! Теперь он работает отлично. - person Controless; 22.06.2020

arrow_upward
1
arrow_downward

Вы неправильно обновили значение свойства fanSpeedCard content в ngOnInit (). В 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) {}
}
person ParthoShuvo    schedule 22.06.2020