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 были назначены хранилищам , и ТАКЖЕ данные хранилища в html начинают отображаться, когда на странице html выполняется какое-либо действие, например, щелчок любой случайной фиктивной кнопки или что-то в этом роде. Вероятно, это связано с тем, как и когда страница html отображается с помощью ngOnInit (), но может ли кто-нибудь прояснить, как я могу визуализировать данные STORES при начальной загрузке страницы БЕЗ необходимости щелкать что-либо.

Answer 1

Это признак отрисовки веб-страницы до привязки. Вы можете контролировать рендеринг.

Вставьте переменную с именем show и установите для нее значение false.

После этого .stores установит значение true для набора данных.

ul тег в HTML добавьте это.

*ngIf='show'

Answer 2

Напишите свой код в ngAfterViewInit , как показано ниже.

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