Question

我在一个视图中有两种形式，每种形式都输出更改。我有一个带有两个选择器的全局指令，以获取两个流。

我可以轻松地处理一种形式，但是当我有两种形式时，将每种形式放在其自己的管道或指令中，它们会把保存功能弄得一团糟，可以这么说，因此我需要在同一个管道中。（或其他解决方案；）

表单组件

<form name="shop_info"
      autocomplete="off"
      #f1="ngForm"
      (SubmitShop)="save($event)"
      [SaveShop]="f1"
      *ngIf="merchant">
...
</form>
...
<form name="region"
      autocomplete="off"
      #f2="ngForm"
      (SubmitRegion)="save($event)"
      [SaveRegion]="f2">
...
</form>

具有一个流的指令：

@Directive({
    selector: '[SaveShop], [SaveRegion]'
})
export class SaveMerchantDirective implements OnInit {
    @Input() SaveShop: any;
    @Input() SaveRegion: any;
    @Output() SubmitShop: EventEmitter<any> = new EventEmitter<any>();
    @Output() SubmitRegion: EventEmitter<any> = new EventEmitter<any>();
    @Input() debounce = 350;

    constructor(
        private saveService: SaveService,
        private $transitions: TransitionService
    ) { }

    ngOnInit() {
this.saveRegion.form.valueChanges
    .pipe(
        debounceTime(this.debounce),
        switchMap((data: Object) => {
            if (!sessionStorage.getItem('dataRegion') || sessionStorage.getItem('dataRegion') === '{}') {
                sessionStorage.setItem('dataRegion', JSON.stringify(data));
            }

            this.$transitions.onBefore({}, () => {
                if (this.saveRegion.valid && !this.saveRegion.pristine) {
                    if (confirm(this.translate.instant(
                        'You are about to discard your REGION changes. Click "OK" to discard and navigate away! Click "Cancel" to stay.'
                    ))) {
                        this.discard();
                        return true;
                    } else {
                        return false;
                    }
                }
            });

            if (this.saveRegion.valid && !this.saveRegion.pristine) {
                window.dispatchEvent(new CustomEvent('showHeader', { detail: true }));

                return this.saveService.currentStatus$.pipe(
                    map(status => {
                        if (status === 'save') {
                            this.save(data);
                        } else if (status === 'discard') {
                            this.discard();
                        }
                    })
                );
            } else {
                return NEVER;
            }
        })
    )
    .subscribe();
this.$transitions.onExit({}, () => {
    sessionStorage.removeItem('dataRegion');
    status = 'false';
    this.saveService.changeStatus('false');
});

我该如何处理？

我可以简单地这样做吗：

combineLatest(this.saveRegion.form.valueChanges, this.saveShop.form.valueChanges)
    .pipe(
        debounceTime(this.debounce),
        switchMap((data: Array<Object>) => {...

编辑：

做

Observable.combineLatest(
    this.saveShop.form.valueChanges,
    this.saveRegion.form.valueChanges
)
    .subscribe(...

给予Property 'combineLatest' does not exist on type 'typeof Observable'.

做

combineLatest(
    this.saveShop.form.valueChanges,
    this.saveRegion.form.valueChanges
)
    .subscribe(...

给我带来了几个问题，其中一个是“ form”无法读取未定义的（因为两个流不会同时进入，所以一个是未定义的）。如果我添加startWith(null)，我得到 this.saveShop.form.valueChanges.startWith is not a function

Answer 1

如果我添加startWith（null），则会得到this.saveShop.form.valueChanges.startWith不是函数

至少很容易解决：不赞成使用这种运算符（如果从正确的文件中导入“正确的” startWith，可能仍然可以使用），而不是使用{ {1}}（就像您与其他运算符一样：.pipe，debounceTime）

switchMap

（或者，this.saveRegion.form.valueChanges.pipe(startWith(null)) //...也可以）。

另一件事：您可以concat(of(null), this.saveRegion.form.valueChanges)列出所有未定义/空值，而仅使用“好东西”，就像这样

filter

如何在同一管道中管道传输两个数据流/可观察对象？

1 个答案: