Некоторая регистрируемая информация (с использованием console.log на английском языке) исчезает из консоли после перезагрузки веб-страницы.

Question

Я создаю веб-сайт, используя Spring для моего бэкэнда и angular, и html в качестве внешнего интерфейса.

В моей базе данных MySQL есть две таблицы (services / offer) (таблица предложений имеет внешний ключ serviceName, которыйв то же время является первичным ключом таблицы служб.

У меня есть угловой компонент, который вызывает две таблицы базы данных и помещает их в два разных массива.

Я пытался создать новыймассив в угловых, который содержит число вхождений каждого serviceName в массиве предложений, но когда я пытался войти (console.log), новый список иногда пуст, а иногда даже не появляется.

Вот угловойкомпонент:

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
    selector: 'app-offrea',
    templateUrl: './offrea.component.html',
    styleUrls: ['./offrea.component.scss']
})
export class OffreaComponent implements OnInit {

    loginuser: any = {};
    offres: any[] = [];
    services: any[] = [];
    countList: any[] = [];
    count: number;
    constructor(private service: UserService) {
        this.service.getAllOffer().subscribe(o => {
            this.offres = o;
        });
        this.service.getServices().subscribe(ser => {
            this.services = ser;
        });
        this.f(this.offres, this.services);
        console.log(this.countList);
    }
    ngOnInit() {
    }

    f(a1, a2) {
        for (let i = 0; i < a1.length; i++) {
            this.count = 0;
            for (let z = 0; z < a2.length; z++) {
                if (a1[i].services.serviceName === a2[z].serviceName) {
                    this.count++;
                    this.countList.push(this.count);
                }
            }
            this.count = 0;
        }
    }
}

Answer 1

Итак, проблема в том, что вы вызываете две асинхронные функции (subscribes, которые делают HTTP-запросы) синхронно. Это означает, что к тому времени, когда вы получите звонки this.f(...) и console.log, ваши http-звонки могут или могут еще не завершиться .

Решение состоит в том, чтобы объединить ваши подписки в одну функцию и вызвать this.f(...) и console.log внутри обратного вызова подписки. Вы можете использовать либо RxJS ОбъединитьЛастест , либо forkJoin . Я использовал forkJoin в своем ответе, потому что http наблюдаемые завершены.

Вот стекблитц с рабочим кодом (был удален файл user.service.ts). https://stackblitz.com/edit/angular-zvfsft

В Offra.component.ts

// beginning of file...

  /* I recommend moving your logic to ngOnInit */
  ngOnInit() {
    // You need to combine your two calls
    //  you can use combineLatest or forkJoin
    forkJoin(
      this.service.getAllOffer(),
      this.service.getServices(),
    ).subscribe(([offres, services]) => {
      this.offres = offres;
      this.services = services;
      this.f(this.offres, this.services);
      console.log(this.countList);
    });
  }

// rest of file...

Основное различие между forkJoin и combineLatest:

• forkJoin требует, чтобы все наблюдаемые были завершены перед передачей значений подписчику. Это считается "холодной" наблюдаемой, потому что она будет излучать только один раз.
• combineLatest требует, чтобы все наблюдаемые испускали хотя бы один раз , прежде чем передать какие-либо значения подписчику. У него есть другое отличное поведение, но суть в том, что это обычно возвращает горячую наблюдаемость. Вы можете прочитать документы по этому вопросу, если хотите узнать больше.

Надеюсь, это работает для вас. Ура!