Javascript 在html上呈现数据

我正在处理一个角度应用程序。我的Assets文件夹中有一个json，我正在将json数据加载到组件中，如下所示：

import data from './../.assets/data.json';

在此之后，我将此数据分配给一个数组，如下所示：

array1 = data;

现在我正在调用ngOnInit中的一个方法，该方法获取这个数组和来自rabbitmq的一些数据，并进行一些计算，然后给出最终的结果数组“resultArray”。我的代码工作正常，但问题是我想在使用array1加载时以html呈现数据（数据来自json）。加载页面后，我希望看到页面上已经有json数据。但是，当我从rabbit mq向组件发送数据时（我的组件在rabbit mq发送数据时获取数据，我执行一些操作并在html上显示数据），我希望html从“resultArray”呈现数据。我怎样才能做到这一点

在模板中使用一些变量（例如，

displayedArray

）

在组件初始化时，设置此变量

data

从数据库加载数组后，进行计算并将结果保存到

displayedaray

，根据

displayedaray

中的数据更新角度视图

@Component({
   template: "{{ displayedArray | json }}"
}) 
class MyMagicComponent {
   displayedArray: Array<any>;

   constructor(private _myMagicDBService: DBService) {}

   ngOnInit() {
     this.displayedArray = data;
     this._myMagicDBService.getMyData().subscribe(res => {
       this.displayedArray = makeSomeMagicWithDataFromDB(res);
     })
   }
}

@组件({
模板：“{displayedArray}json}”
}) 
类MyMagicComponent{
显示阵列：阵列；
构造函数（私有的_myMagicDBService:DBService）{}
恩戈尼尼特（）{
this.displayedaray=数据；
这是._myMagicDBService.getMyData（）.subscribe（res=>{
this.displayedaray=makeSomeMagicWithDataFromDB（res）；
})
}
}

在模板中使用一些变量（例如，

displayedArray

）

在组件初始化时，设置此变量

data

从数据库加载数组后，进行计算并将结果保存到

displayedaray

，根据

displayedaray

中的数据更新角度视图

@Component({
   template: "{{ displayedArray | json }}"
}) 
class MyMagicComponent {
   displayedArray: Array<any>;

   constructor(private _myMagicDBService: DBService) {}

   ngOnInit() {
     this.displayedArray = data;
     this._myMagicDBService.getMyData().subscribe(res => {
       this.displayedArray = makeSomeMagicWithDataFromDB(res);
     })
   }
}

@组件({
模板：“{displayedArray}json}”
}) 
类MyMagicComponent{
显示阵列：阵列；
构造函数（私有的_myMagicDBService:DBService）{}
恩戈尼尼特（）{
this.displayedaray=数据；
这是._myMagicDBService.getMyData（）.subscribe（res=>{
this.displayedaray=makeSomeMagicWithDataFromDB（res）；
})
}
}