Как программно вызвать метод, который устанавливает источник * ngFor и отображает соответствующий HTML - PullRequest
Новая
       6

Как программно вызвать метод, который устанавливает источник * ngFor и отображает соответствующий HTML

0 голосов
/ 26 июня 2018

Я работаю над проектом Angular.

Когда пользователи нажимают на категории, мне нужно показать соответствующие подкатегории.

Например, нажав на Напитки Мне нужно отобразить: Кокс , Фанта , Пепси ...

При нажатии на еду, например, мне нужно отобразить: Гамбургеры , Картофель , Рыба

И это работает, когда я нажимаю на основные группы, подгруппы меняются и отображаются в соответствии с ожиданиями.

Но я бы хотел установить Drinks в качестве категории по умолчаниюПоэтому, когда я подхожу к экрану, я хочу увидеть Напитки и Колу, Фанта , Пепси .. Как будто я вручную нажал на Напитки ..

Я пытался добиться этого следующим образом:

шаг 1:

Получить данные из базы данных, всеосновные категории, все подкатегории, поэтому я могу применить фильтр - на основе categoryId - получить все подкатегории: 

export class MainScreenCategories implements OnInit {

  @Input() groups: Group[];
  @Input() subGroups: Group[];
  filteredSubGroups: Group[];
  selectedId: string;
  selectedSubId: string;

  constructor(
  private _ref: ChangeDetectorRef, 
  private _activatedRoute: ActivatedRoute, 
  private _groupService: GroupService, 
  private _http: HttpClient,
  private _articleService: ArticleService,
  private _globalHelper: GlobalHelperService
  ) { }

  ngOnInit() {
    this.selectedId = '78ebcad8-8cb0-4172-8cd8-bb6fb6b3bf53';
    this.groups = this._activatedRoute.snapshot.data['groups'];
    this.subGroups = this._activatedRoute.snapshot.data['subGroups'];

    // This is source to my template directive *ngFor - filteredSubGroups
    this.filteredSubGroups = this.subGroups.filter(item => item.parentId == this.selectedId);
    console.log(this.filteredSubGroups);

    //this._ref.detectChanges();

    //I've tried adding timeout while fetching data
    //this._groupService.getAll().subscribe(data => setTimeout(() => this.groups = data, 0));
    //this._groupService.getAllSubGroups().subscribe(data => setTimeout(() => this.subGroups = data, 0));

  }

шаг 2:

Напишите немного HTMLотображать данные: 

<div class="tab-pane" id="whatever">
  <ul>
    <li *ngFor="let subgroup of filteredSubGroups">
      <button type="button" data-toggle="" data-target="" class="btn categories-btn">
                {{subgroup.title | uppercase}}
      </button>
    </li>
  </ul>
</div>

Как видите, ребята, я зацикливаюсь filteredSubGroups для отображения подкатегорий.

И мой console.log(filteredSubGroups) в ngOnInit также содержит правильные данные, нопри первом запуске приложения я получаю в консоли следующее сообщение:

enter image description here

Когда я очищаю консоль и перехожу к шаблону другого компонента и возвращаюсь к этомуВо-первых, я вижу, что в моей консоли больше нет ошибок, только 3 подкатегории зарегистрированы там, потому что я сказал в ngOnInit console.log(filteredSubGroups),

enter image description here

но даже если они зарегистрированы, они не видны в шаблоне html, и это самая большая проблема, я не могу понять, почему?

Спасибо, ребята

Любая помощь - это здорово!

1 Ответ

0 голосов
/ 26 июня 2018

Возможно, вам следует подписаться на данные Активированного маршрута.Используя что-то вроде этого. 

this.route.data.subscribe((data) => {
    if(data){
      const {groups, subGroups} = data;
      this.groups = groups;
      this.subGroups = subGroups;
      this.filteredSubGroups = this.subGroups.filter(item => item.parentId == this.selectedId);
    }

})

Вероятно, происходит то, что первый вызов маршрута убивает компонент из-за нуля.Затем щелчок мышью переинициализирует компонент после того, как у данных будет время для асинхронной выборки.

...