Маршрутизация в angular слишком быстра для моих наблюдаемых

Question

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

Вот мой код:

Обзор проекта HTML:

<div class="card">
    <div class="card-body">
        <h3 class="card-title">Projects</h3>
        <table id="myTable" class="table table-striped">
            <thead>
                <tr>
                    <th scope="col" sortable="description" (sort)="onSort($event)">Name</th>
                    <th scope="col" sortable="entity" (sort)="onSort($event)">Entity</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let project of projects" [routerLink]="['/projects/edit/', project.projectId]" >
                    <td>{{project.name}}</td>
                    <td>{{project.entity}}</td>
                </tr>
            </tbody>

        </table>
        <div class="text-right">
            <a class="btn btn-primary" routerLink="/projects/add/">Add new project</a>
        </div>
    </div>


</div>

Компонент добавления проектов:

submitProject() {
    this.projectService.addProject(this.project).subscribe(
      () => {},
      (err) => console.log(err),
      () => this.router.navigate(['/projects'])
    );
  }

Компонент проектов:

getProjects() {
    this.projectService.getProjects().subscribe(projects => this.projects = projects)
  }

  ngOnInit() {
    this.getProjects();
  }

Служба проектов:

addProject(project: Project): Observable<any> {
    return this.httpClient.post<Project>(this.url, project, this.httpOptions)
  }

  getProjects(): Observable<Project[]> {
    return this.httpClient.get<Project[]>(this.url)
  }

Если требуется какой-либо дополнительный код , Скажите мне, пожалуйста. Заранее спасибо!

Answer 1

Маршрутизация не является «слишком быстрой», но вы запрашиваете данные задолго до обработки, которую ваш API собирается выполнить в POST нового проекта, поэтому, если вы сразу попытаетесь получить обновленный список, ваш API просто не будет ответ с новейшим проектом в ответ. Вы можете решить эту проблему по-разному, и не существует единственно правильного способа сделать это.

Некоторые решения будут

1. Опрос ваших проектов с интервалом
2. Ввести отправленные сервером события, чтобы сохранить список в синхронизации c
3. Задержка запроса списка (плохая практика)
4. Переработать конечную точку POST, чтобы она отвечала только после успешного создания новой проект

Answer 2

Каждый http request в Angular, работа asynchronously и javascript является языком с одной нитью. Поэтому, если вы вызовете http.get или любой другой метод, обратный вызов, который вы передадите в качестве аргумента, будет выполнен после того, как данные поступят и когда поток освободится (это время выполнения обратного вызова http). Вы можете использовать Resolvers для извлечения данных перед визуализацией компонента, или вы можете обернуть свой код Html в fe ng-container с помощью ngIf и отобразить часть кода, если обязательное свойство не равно нулю / не определено. Вот ссылка на документацию: https://angular.io/api/router/Resolve