在 Angular html 上渲染数据

Question

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

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

在此之后，我在 ngOnInit 中将这些数据分配给一个数组，如下所示；

array1 = data;

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

Answer 1

1. 在模板中使用一些变量（例如，displayedArray）

2. 在你的组件初始化时设置为这个变量data

3. 从数据库加载数组后进行计算并将结果保存到displayedArray，根据displayedArray内部的数据角度更新视图；

   @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);
        })
      }
   }