代码之家 › 专栏 › 技术社区 › Trisped

使用两个可观测值是否创造了竞争条件?

observable angular

Trisped · 技术社区 · 6 年前

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>

2 回复 | 直到 6 年前

Learning 6 年前

这可能是一个竞赛条件。通常,从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));

Rafael 6 年前

总是

可以使用 flatMap() . 另外,如果您的组件不是 routed feature module ,考虑使用 route snapshot