角度4:API调用后更新模板变量 [英] Angular 4: Update template variable after API call

问题描述

我有一个Component指令，用于显示具有一些信息的div.

I have a Component-directive that I use to show a div with some information.

此组件称为 SitesComponent ，并包含在页面中.除了以下内容， SitesComponent 的主要行为是可以的:

This component is called SitesComponent and is included in a page. The main behavior of the SitesComponent is fine, except for this:

• 我有一个对后端的API调用，我在其中返回了一些数据，后端调用执行得很好，并且我收到了信息，但是变量模板上未更新

这是我的代码:

import { Component } from '@angular/core';
import { MyApi } from '../../myapi';

@Component({
  selector: 'sites-component-widget',
  templateUrl: './sites-component.html',
  styleUrls: ['./sites-component.scss'],
})
export class SitesComponent {
    data: any = [];
    constructor(private api: MyApi}

    ngOnInit() {
        var _ = this
          this.api.company_sites(this.companyId).subscribe(
            response => {
                //this.data = response; 
                this.data = [1,2,3]; 
            },
            error => {
              console.log("error")
            }
          )
        }        
    }
}

我尝试使用收到的响应以及静态数据来更新变量 data .用户界面永远不会通过API调用中的更改进行更新.

I tried to update the variable data using the received response and also using static data. The UI is never updated with the changes inside the API call.

我正在使用有角度的http客户端:

I'm using angular http client:

import { HttpClient } from "@angular/common/http";

但是它也不起作用

• 我做错了什么?

我了解了有关对API使用可观察性或承诺的信息，我尝试了两种方式，但找不到解决方案...更新 .subscribe()中的变量时，我的UI从未更新过 strong>或 .then()函数

I read about using observables or promises for the API, I tried both ways and I couldn't find a solution... My UI is never updated when I update the variable inside the .subscribe() or .then() functions

我忘了添加我的html，但到目前为止只有3行:

I forgot to add my html, but as far it is just 3 lines:

<div class="sites-online-widget">
    **{{data}}**
</div>

我的问题摘要:

如果执行此操作，模板上的变量已更新

ngOnInit() {
    this.data = [1,2,3,4]
}

但是当我这样做时，模板上的变量并未更新:

but when I do this, the variable is not updated on the template:

ngOnInit() {
    var _ = this
      this.api.company_sites(this.companyId).subscribe(
        response => {
            this.data = [1,2,3]; 
        }
      )}        
}

最终编辑

找到了一个可以解决其他问题的解决方案，我试图解决这个问题.

Final Edit

Found a solution that worked in another question, I tried to close this one.

解决我问题的问题是:

Angular 2视图将不会订阅中的变量更改后更新

Angular 2 View will not update after variable change in subscribe

3个基本步骤:

// Import ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';

// Add ChangeDetectorRef to constructor
constructor(private cd: ChangeDetectorRef) {}

// Call markForCheck at the end of the subscribe function
this.cd.markForCheck();

我的代码结束如下:

import { Component } from '@angular/core';
import { MyApi } from '../../myapi';

// 1
import { ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'sites-component-widget',
  templateUrl: './sites-component.html',
  styleUrls: ['./sites-component.scss'],
})
export class SitesComponent {
    data: any = [];
    constructor(
      private api: MyApi,
      // 2
      private cd: ChangeDetectorRef}

    ngOnInit() {
        var _ = this
          this.api.company_sites(this.companyId).subscribe(
            response => {
                this.data = response; 
                // 3
                this.cd.markForCheck()
            },
            error => {
              console.log("error")
            }
          )
        }        
    }
}

推荐答案

实现OnInit

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

export class SitesComponent implements OnInit {}

这篇关于角度4:API调用后更新模板变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！