Создает ли это использование двух наблюдаемых условий гонки?

Question

У меня есть угловой компонент, который извлекает данные с сервера, чтобы заполнить раскрывающийся список, и извлекает параметр из маршрута, чтобы установить выбранный параметр в раскрывающемся списке.Все это делается в ngOnInit ().Поскольку оба из них используют наблюдаемые, будет ли в моем решении условие гонки, при котором выбранное значение может быть установлено до заполнения параметров?

import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, NgForm } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { ToastrService } from 'ngx-toastr';

import { ProjectService } from '../../shared/services/project.service';

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

    projectShortName: string;
    projectsShortName: string[];
    projectStatusForm: FormGroup;

    constructor(
        private fb: FormBuilder,
        private projectService: ProjectService,
        private route: ActivatedRoute,
        private toastr: ToastrService
    ) {
        this.projectStatusForm = this.fb.group({
            projectShortName: '',
            statusText: '',
            varianceOriginal: ''
        });
    }

    ngOnInit(): void {
        // Populate dropdown.
        this.projectService.getProjectsShortName().subscribe((data) => this.projectsShortName = data);

        // Set the selected value of the dropdown.
        this.route.params.subscribe(params => {
            this.projectShortName = params['projectShortName'];
            const projectShortNameDropdownBox: AbstractControl = this.projectStatusForm.get('projectShortName');

            if (this.projectShortName) {
                projectShortNameDropdownBox.setValue(this.projectShortName);
                projectShortNameDropdownBox.disable();
            } else {
                projectShortNameDropdownBox.enable();
            }
        });
    }
}

<form #npsForm="ngForm" class="col-md-8" [formGroup]="projectStatusForm">
    <div class="form-group">
        <label for="projectShortName">Project</label>
        <select id="projectShortName" class="form-control" formControlName="projectShortName" required>
            <option *ngFor="let shortName of projectsShortName" [value]="shortName">{{shortName}}</option>
        </select>
    </div>
    <div class="form-group">
        <label for="statusText">Status Text</label>
        <textarea id="statusText" class="form-control" formControlName="statusText" required rows="4"></textarea>
    </div>
    <div class="form-group">
        <label for="varianceOriginal">Variance</label>
        <input id="varianceOriginal" class="form-control" formControlName="varianceOriginal" required type="text">
    </div>
</form>

Answer 1

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

Вы можете явно синхронизировать с помощью flatMap () .Кроме того, если ваш компонент не является маршрутизируемым функциональным модулем , попробуйте вместо него использовать снимок маршрута ;это синхронно.

Answer 2

Это может быть состояние гонки.Обычно получение данных из API занимает больше времени, чем маршрутизатор, но я все же предпочел бы использовать mergeMap, чтобы избежать ошибок состояния гонки.Вы можете проверить ссылку ниже для примера кода слияния:

https://jsfiddle.net/btroncone/41awjgda/

//emit 'Hello'
const source = Rx.Observable.of('Hello');
//map to inner observable and flatten
const example = source.mergeMap(val => Rx.Observable.of(`${val} World!`));
//output: 'Hello World!'
const subscribe = example.subscribe(val => console.log(val));