ユーザーと取得リクエストの衝突HTMLビューを更新する角度4

Question

多くの異なるユーザーが同時に使用できるセットアップチェックボックスがあります。 5秒ごとにチェックボックスのステータスを取得するためにサーバーをポーリングします。問題は、時々、私がボックスをチェックして（ポストリクエストをする）、getリクエストが解決され、ビューが更新されている間に発生することがあるということです。これは基本的にチェックボックスのクリックを「逃し」、チェックされていないボックスはユーザーがクリックするとチェックされません。これを回避する方法はありますか？ "私のボックスをチェックすると、要求を受け取ってビューを更新しないようにする"という私の観察可能なことを伝える方法はありますか？私はclick（）関数の開始時にobservableへの登録を解除し、その後に再登録を試みましたが、問題をはるかに悪化させました。

私のコードの簡単な例： コントローラー：

ngOnInit(): void { 

    // get our data immediately when the component inits 
    this.checklistService.getchecklist() 
     .first() // only gets fired once 
     .subscribe(data => { 
      this.checklist = data; 
     }); 

    // get our data every subsequent 5 seconds 
    this.subscription.add(
     IntervalObservable.create(5000) 
      //.takeWhile(() => this.alive) // only fires when component is alive 
      .subscribe(() => { 
       this.checklistService.getchecklist() 
        .subscribe(data => { 
         this.checklist = data; 
        }); 
      }) 
    ); 
} 
checkOrUncheck(outgoingItemCheck: ChecklistItem) { 
    if (outgoingItemCheck.CheckListStepId == null) { 
     console.log('null ItemId found at checklist with a description of: ' + outgoingItemCheck.description); 
    } 
    else { 
     if (outgoingItemCheck.Checked == null) { 
      outgoingItemCheck.Checked = true; 
     } 
     else { 
      outgoingItemCheck.Checked = !outgoingItemCheck.Checked; //switch from true to false, or false to true 
     } 

     this.checklistService.checkOrUncheck(outgoingItemCheck) 
      .then(checklistItemFromServer => { 
       this.checklistItem = checklistItemFromServer; 
      }); 
    } 
} 

サービス

getchecklist(): Observable<ChecklistItem[]> { 
     return this.http.get(this.checklistUrl).map(response => response.json()); 
    } 

HTML

<label class="custcol3 form-check-label columnchecklistheader columncentertext"> 
    <div *ngIf="clItem.Checked; else notCheckBlock"> 
     <input class="form-check-input" type="checkbox" checked="checked" (click)="checkOrUncheck(clItem)" value="" style="cursor: pointer;"> 
    </div> 
    <ng-template #notCheckBlock> 
     <label> 
      <input class="form-check-input" type="checkbox" (click)="checkOrUncheck(clItem);" value="" style="cursor: pointer;"> 
     </label> 
    </ng-template> 
</label> 

Answer 1

ハム...私は、このアプリケーションでは、より問題だと思いますこの場合に必要となる。

Answer 2

したがって、クライアントのポストリクエストがサーバーからのポーリング応答と「クロス」できないようにする必要があります。

あなたの最も単純な解決策（または少なくともその一部）は、投稿要求と投票要求のためになりますではなく、はお互いに独立していると思います。次のポーリング要求にあなたの「投稿要求」を埋め込みます。

スキーマを可能な限りレスポンスにするには、チェックボックスをクリックした後、できるだけ早く次のポーリング要求を行う必要があります。

ただし、これは疑問に答えます。もう1つの考慮点は、すべてのクライアントが同じ「同意した画像」を表示するという保証です。各チェックボックスの状態は、他のクライアントの状態とは異なることが許されてはなりません。

特定のクライアントではなくサーバーが確実に制御されるように、long-pollingのアプローチが必要な場合があります。