Question

我知道| HTML内部的异步会触发订阅。现在我有一个不提交的更复杂的查询。当我将可观察对象分配给我的可观察字段时。

ReportsComponent.html：

    <mat-form-field *ngIf="initialCheckboxTick" class="col-12">
        <mat-label>Elevations</mat-label>
        <mat-select multiple [(value)]="selectedElevations">
            <mat-optgroup *ngFor="let phase of phasesWithElevations$ | async" [label]="phase.name">
                <mat-option
                        *ngFor="let elevation of phase.elevations"
                        [value]="elevation.id"
                >
                    {{elevation.name}}
                </mat-option>
            </mat-optgroup>
        </mat-select>
    </mat-form-field>

ApiService.ts：

public getPhases(): Observable<Phase[]> {
    return this._httpClient.get<Phase[]>(this._apiUrl + '/phases').pipe(
        // @ts-ignore
        map(res => res.data),
        tap(
            (phases: Phase[]) => {
                this._phasesSource.next(phases);
            }
        )
    );
}

public getPhasesAndElevations(currentProjectId: string): Observable<Phase[]> {
    return this.getPhases()
        .pipe(
            concatMap(
                phases => of(...phases).pipe(
                    tap(
                        x => console.log('Phase', x)
                    ),
                    concatMap(
                        (phase: Phase) => {
                            return concat(
                                this.selectPhase(phase.id).pipe(
                                    ignoreElements(),
                                ),
                                this.getElevations().pipe(
                                    map(res => {
                                        // @ts-ignore
                                        phase.elevations = res.data;
                                        return phase;
                                    })
                                ),
                                this.selectProject(currentProjectId).pipe(
                                    ignoreElements(),
                                ),
                            );
                        })
                )
            ),
            toArray()
        );
}

ReportsComponent.ts：

this.phasesWithElevations$: Observable<Phase[]>;

setCategory() {
    this.phasesWithElevations$ = this._apiService.getPhasesAndElevations(this._projectService.project.id);
}

在Mat-select内类别的第一个选择上，我调用setCategory方法。

如果有人指出我的问题，我会很高兴。我认为问题出在复杂的查询之内。

Stackblitz： Found here 看起来像是在我的堆栈闪电战中一样。

Answer 1

如评论中所述。管道调用周围缺少一些括号。

此：

*ngFor="let phase of phasesWithElevations$ | async"

应该是这样

*ngFor="let phase of (phasesWithElevations$ | async)"

文档AsyncPipe中没有关于此必要括号的内容。无论如何，它在没有括号的情况下可以在我的闪电战中工作。因此，这实际上与编译器或之后使用的属性有关。我正在使用的IDE是WebStorm。

HTML中的RXJS异步管道运算符不会触发复杂的查询

1 个答案: