Angular html 组件在加载页面时未呈现本地 json 数据

Question

import { Store,STORES } from '../models/store';

export class StoreLocatorComponent implements OnInit { 
public Stores: any = [];
constructor() {  
   }

ngOnInit(): void {
      this.Stores = STORES ; 
      this.Stores.forEach(element => {
        console.log(element);
      });
  }

}

HTML 部分

<ul>
      <li *ngFor="let store of Stores">
        {{store.name}}
      </li>
    </ul>

但是这个 html 页面没有呈现 Stores 内的值，而在日志中我可以看到 STORES 对象中的数据已分配给 Stores，当在 html 页面上完成某些 activity 时，html 中的商店数据也会开始显示，例如单击任何随机虚拟按钮或类似的东西。这可能与 html 页面呈现 w.r.t ngOnInit() 的方式和时间有关，但有人可以阐明我如何在页面初始加载时呈现 STORES 数据而无需单击任何内容。

Answer 1

在 ngAfterViewInit 中编写您的代码，如下所示。

ngAfterViewInit() {
 this.Stores = STORES ; 
      this.Stores.forEach(element => {
        console.log(element);
      });
  }

Answer 2

这是绑定前网页呈现的症状。您可以控制渲染。

放入一个名为 show 的变量并将其设置为 false。

this.stores后数据集显示为真

在 HTML 的 ul 标签上添加这个。

*ngIf='show'

Angular html 组件在加载页面时未呈现本地 json 数据

Angular html component not rendering the local json data on loading the page

json

constructor

html-rendering

ngoninit

angular