最终编辑

Question

我有一个Component-directive，用于显示带有一些信息的div。

此组件称为 SitesComponent ，并包含在页面中。 SitesComponent 的主要行为很好，除此之外：

我有一个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")
            }
          )
        }        
    }
}

我尝试使用收到的响应和静态数据更新变量数据。永远不会使用API调用内的更改来更新UI。

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

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

但它既没有工作

我做错了什么？

我读到了使用API的observable或promises，我尝试了两种方法，但我找不到解决方案...当我更新 .subscribe（）中的变量时，我的UI永远不会更新或 .then（）功能

修改我忘了添加我的HTML，但到目前为止只有3行：

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

我的问题摘要：

如果我这样做，模板上的变量会更新

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

但是当我这样做时，模板上的变量不会更新：

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

最终编辑

找到了另一个问题的解决方案，我试图关闭这个。

解决我的问题的问题是：

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")
            }
          )
        }        
    }
}

Answer 1

实施OnInit

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

export class SitesComponent implements OnInit {}

Angular 4：API调用后更新模板变量

我的问题摘要：

最终编辑

1 个答案: