服务布尔值意外更改而未触发

Question

我的组件在html中有以下按钮：

<button class="btn btn-danger" (click)="changeState()">Stop/Resume Recording</button>

我的app.component.ts有以下方法：

constructor(private fServ: FormService) { }

ngOnInit() {
  this.fServ.startListening(this.mandatForm.valueChanges, 450);
}

changeState() {
  console.log(this.fServ.recordingRunning); //1st log
  this.fServ.changeRecordingState();
}

form.service.ts：

@Injectable()
export class FormService {
formSubscription: Subscription;

lastListenValue = {};
lastListenTimestamp: number;
recordedListeningValues = [];
recordingRunning: boolean = false;

timeToNextReplay: number; //needs implementation

constructor() {}

startListening(obs: Observable<any>, debTime: number) {
  this.recordingRunning = true;
  this.recordedListeningValues = [];
  this.formSubscription = obs.debounceTime(debTime).map(data => {
    let difference = diff(this.lastListenValue, data);
    this.lastListenValue = data;
    this.lastListenTimestamp = Date.now();
    return {diff: difference, ts: this.lastListenTimestamp};
  }).subscribe(x => {
    if (this.recordingRunning) this.recordedListeningValues[x.ts] = x.diff;
  });
}

changeRecordingState() {
  console.log(this.recordingRunning); // 2nd log
  this.recordingRunning = (this.recordingRunning) ? false : true;
  console.log(this.recordingRunning); // 3rd log
}

现在，我的问题出现并按以下方式进行三次点击：

首先点击

15:10:34.585 app.component.ts:50 true
15:10:34.585 form.service.ts:54 true
15:10:34.586 form.service.ts:56 false

再次点击

15:10:34.821 app.component.ts:50 false
15:10:34.822 form.service.ts:54 false
15:10:34.822 form.service.ts:56 true

第三次点击

15:10:35.068 app.component.ts:50 false
15:10:35.068 form.service.ts:54 false
15:10:35.069 form.service.ts:56 true

这完全令人困惑。我不知道为什么布尔值一旦设置为false就会更改回true。如您所见，该值实际上会发生变化，但会再次重新设置为false。

编辑：console.log(this.fServ)

这是我在点击changeState()：

之前打印对象时的输出

app.component.ts:50 FormService {defaultTime: 250, initialFormObject: {…}, lastListenValue: {…}, recordedListeningValues: Array(0), recordingRunning: true, …}
defaultTime: 250formObservable: AnonymousSubject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}formSubscription: Subscriber {closed: true, _parent: null, _parents: null, _subscriptions: null, syncErrorValue: null, …}initialFormObject: {basic: {…}, financials: {…}, location: "", visitFrequency: ""}lastListenTimestamp: nulllastListenValue: {}recordedListeningValues: Array(0)length: 0__proto__: Array(0)recordingRunning: falsereplayRunning: false__proto__: ObjectchangeRecordingState: ƒ (objectBeforeResume)pauseListening: ƒ ()resumeListening: ƒ (objectBeforeResume)startListening: ƒ (obs, debTime)startReplay: ƒ (replayValues)stopListening: ƒ ()stopReplay: ƒ ()constructor: ƒ FormService()__proto__: Object

我不明白为什么各种值都是空的。 recordedListeningValues[]肯定不是空的。如果我退回它，它就有值。基本上所有其他值也是如此。要明确的是，recordingRunning当时是true，我还没有改变它的价值。任何人都可以向我解释为什么值的存储方式不同吗？

编辑2

这变得越来越混乱。当我直接在mandatForm.valueChanges订阅app.component.ts并保持此状态时。该服务按预期工作。我无法理解为什么会发生这种情况？我单击changeState方法三次后尝试取消订阅Observable时出现空错误（如果我不在valueChanges订阅app.component.ts

编辑2.1

工作一次后，我不能复制它。

编辑3

好的，我想我有问题。无论出于何种原因，单击表单上的任何按钮都会触发表单提交。我需要将类型更改为按钮。这是一个愚蠢的错误。

这是/ html中的代码，它触发了我的提交方法，其中包含一些清理逻辑：

 <form (ngSubmit)="onSubmit(f)" #f="ngForm">
   <div class="row">
        <button class="btn btn-danger" (click)="changeState()">Stop/Resume Recording</button>
  <button class="btn btn-danger" (click)="formToConsole()">Console Form</button>
  <button class="btn btn-danger" (click)="fServ.stopReplay()">Stop Replay</button>

Answer 1

我看到＆＃34;编辑3＆＃34;，为每个按钮提供类型，对于应提交表单的按钮，请使用type="button"。对于提交表单的按钮，请使用type="submit"。现在，提交方法只会由类型为submit的按钮触发。