我应该使用什么来重置异步功能？

Question

我当前正在使用promise和async等待从subscribe调用中加载数据。我的Web应用程序可以模拟任何用户。当我更改用户时，表中的数据会更改。当前设置适用于初始用户，但不适用于切换用户时。

我相信，如果我可以“重置”承诺，则可以解决此问题，但我知道这是不可能的。

我正在寻找另一种解决方案，希望它与诺言类似，但具有“重置”的功能

  

Component.ts

import { Component, OnInit } from '@angular/core';
import { DashboardService } from '../services/dashboard.service';
import { Dashboard } from '../models/dashboard';
import { AuthService } from '../services/auth.service';
import { User } from '../models/user';
import { Router, RouterEvent, NavigationEnd } from '@angular/router';
import { filter, mergeMap } from 'rxjs/operators';
import { ReqService } from '../services/req.service';
import { Req } from '../models/req';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  displayedColumns: string[] = [
    'flag',
    'Business Unit',
    'Req ID',
    'Vendor'
  ];
  allReqInfo: Dashboard[];
  actionReqs: Dashboard[];
  holdReqs: Dashboard[];
  transmissionReqs: Dashboard[];
  tempReq: Dashboard;
  tempInfoReq: Req;
  reqsArrayLength = 0;
  currentUser: User;
  reqsLoaded: Promise<boolean>;

  actionColor = 'green';
  holdColor = 'yellow';
  transmissionColor = 'red';

  constructor(
    private dashboardService: DashboardService,
    private authService: AuthService,
    private reqService: ReqService,
    private router: Router
  ) { }

  ngOnInit() {
    this.router.events.pipe(
      filter((event: RouterEvent) => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.authService.globalCurrentUser.subscribe(user => this.currentUser = user);
      // this.getDashboard(this.currentUser.username.toUpperCase())
      this.getReqInfo(this.currentUser.username.toUpperCase());
    });
    this.authService.globalCurrentUser.subscribe(user => this.currentUser = user);
    // // this.getDashboard(this.currentUser.username.toUpperCase());
    this.getReqInfo(this.currentUser.username.toUpperCase());
  }

  ngOnDestroy() {
    this.reqsLoaded = Promise.resolve(false);
  }


  getReqInfo(user: string) {
    this.allReqInfo = [];
    this.transmissionReqs = [];
    this.holdReqs = [];
    this.actionReqs = [];
    let counter = 0;
    this.dashboardService.getDashboard(user)
    .pipe(
      mergeMap(req => req.map(
        reqInfo => {
          this.tempReq = {
            _id: reqInfo._id,
            REQ_No: reqInfo.REQ_No,
            Business_Unit: reqInfo.Business_Unit,
            Buyer: reqInfo.Buyer,
            Req_ID: reqInfo.Req_ID,
            Hold_From_Further_Processing: reqInfo.Hold_From_Further_Processing,
            Hold_Status: reqInfo.Hold_Status,
            Sourcing: reqInfo.Sourcing,
            Lines_Not_Sourced: reqInfo.Lines_Not_Sourced,
            Out_To_Bid: reqInfo.Out_To_Bid,
            Transmitted: reqInfo.Transmitted,
            Transmitted_Time: reqInfo.Transmitted_Time,
            Req_Info: this.tempInfoReq = {
              _id: "",
              REQ_No: "",
              Account: null,
              Approved_By: null,
              Approved_On: null,
              Business_Unit: null,
              Buyer: null,
              Currency: null,
              Department: null,
              Fund: null,
              Origin: null,
              REQ_Date: null,
              Requester: null,
              Ship_To: null,
              Status: null,
              lines: null,
              User_Notes: null,
              flag: null
            }
          };
          this.allReqInfo.push(this.tempReq);
          return this.reqService.getReq(reqInfo.REQ_No);
      })
    )
  )
    .subscribe(
      reqInfoObservable => {
        reqInfoObservable.subscribe(
          reqInfo => {
            this.allReqInfo[counter].Req_Info = reqInfo[0];
            if(this.allReqInfo[counter].Transmitted === 'Y') {
              this.transmissionReqs.push(this.allReqInfo[counter]);
            } else if(this.allReqInfo[counter].Hold_From_Further_Processing === 'Y') {
              this.holdReqs.push(this.allReqInfo[counter]);
            } else {
              this.actionReqs.push(this.allReqInfo[counter]);
            };
            counter++;
            console.log(this.allReqInfo);
            this.reqsLoaded = Promise.resolve(true);
        })
      }
    )
  }
}

  

Template.html

<div class="container">
  <div class="req-container mat-elevation-z3">
    <mat-chip-list>
      <div class="mat-display-1">
        Requisition List
      </div>
      <mat-tab-group>
        <mat-tab>
          <ng-template mat-tab-label>
            All
            <mat-chip *ngIf="allReqInfo != null" >{{allReqInfo.length}}</mat-chip>
          </ng-template>
          <div *ngIf="reqsLoaded" class="table-container">
           <table mat-table [dataSource]="allReqInfo" class="mat-elevation">

              <ng-container matColumnDef="color">
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let all"></td>
              </ng-container>

             <ng-container matColumnDef="flag">
               <th mat-header-cell *matHeaderCellDef> FLAG </th>
               <td mat-cell *matCellDef="let all">
                 <div>
                   <mat-checkbox></mat-checkbox>
                </div>
               </td>
             </ng-container>

             <ng-container matColumnDef="Business Unit">
               <th mat-header-cell *matHeaderCellDef> Business Unit </th>
               <td mat-cell *matCellDef="let all"> {{all.Business_Unit }}  </td>
             </ng-container>

             <ng-container matColumnDef="Req ID">
               <th mat-header-cell *matHeaderCellDef> Req No </th>
               <td mat-cell *matCellDef="let all"> {{all.REQ_No }} </td>
             </ng-container>

             <ng-container matColumnDef="Vendor">
               <th mat-header-cell *matHeaderCellDef> Vendor </th>
               <td mat-cell *matCellDef="let all"> {{all.Req_Info.Vendor_Name}} </td>
             </ng-container>

             <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
           </table>
         </div>
        </mat-tab>

        <mat-tab>
          <ng-template mat-tab-label>
            Action
            <mat-chip class="action-chip" *ngIf="actionReqs != null" >{{actionReqs.length}}</mat-chip>
          </ng-template>
          <div *ngIf="reqsLoaded" class="table-container">
           <table mat-table [dataSource]="actionReqs" class="mat-elevation">
             <ng-container matColumnDef="color">
               <th mat-header-cell *matHeaderCellDef></th>
               <td mat-cell *matCellDef="let action" [style.background-color]="actionColor"></td>
             </ng-container>

             <ng-container matColumnDef="flag">
               <th mat-header-cell *matHeaderCellDef> FLAG </th>
               <td mat-cell *matCellDef="let action">
                 <div>
                   <mat-checkbox></mat-checkbox>
                </div>
               </td>
             </ng-container>

             <ng-container matColumnDef="Business Unit">
               <th mat-header-cell *matHeaderCellDef> Business Unit </th>
               <td mat-cell *matCellDef="let action"> {{action.Business_Unit}} </td>
             </ng-container>

             <ng-container matColumnDef="Req ID">
               <th mat-header-cell *matHeaderCellDef> Req No </th>
               <td mat-cell *matCellDef="let action"> {{action.REQ_No}} </td>
             </ng-container>

             <ng-container matColumnDef="Vendor">
               <th mat-header-cell *matHeaderCellDef> Vendor </th>
               <td mat-cell *matCellDef="let all"> {{all.Req_Info.Vendor_Name}} </td>
             </ng-container>

             <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
           </table>
         </div>
        </mat-tab>

        <mat-tab>
          <ng-template mat-tab-label>
            Hold
            <mat-chip class="hold-chip" *ngIf="holdReqs !== null" >{{holdReqs.length}}</mat-chip>
          </ng-template>
          <div *ngIf="reqsLoaded" class="table-container">
           <table mat-table [dataSource]="holdReqs" class="mat-elevation">
             <ng-container matColumnDef="color">
               <th mat-header-cell *matHeaderCellDef></th>
               <td mat-cell *matCellDef="let hold" [style.background-color]="holdColor"></td>
             </ng-container>

             <ng-container matColumnDef="flag">
               <th mat-header-cell *matHeaderCellDef> FLAG </th>
               <td mat-cell *matCellDef="let action">
                 <div>
                   <mat-checkbox></mat-checkbox>
                </div>
               </td>
             </ng-container>

             <ng-container matColumnDef="Business Unit">
               <th mat-header-cell *matHeaderCellDef> Business Unit </th>
               <td mat-cell *matCellDef="let hold"> {{hold.Business_Unit}} </td>
             </ng-container>

             <ng-container matColumnDef="Req ID">
               <th mat-header-cell *matHeaderCellDef> Req ID </th>
               <td mat-cell *matCellDef="let hold"> {{hold.Req_ID}} </td>
             </ng-container>

             <ng-container matColumnDef="Vendor">
               <th mat-header-cell *matHeaderCellDef> Vendor </th>
               <td mat-cell *matCellDef="let all"> {{all.Req_Info.Vendor_Name}} </td>
             </ng-container>

             <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
           </table>
          </div>
        </mat-tab>

        <mat-tab>
          <ng-template mat-tab-label>
            Transmission
            <mat-chip class="transmission-chip" *ngIf="transmissionReqs !== null">{{transmissionReqs.length}}</mat-chip>
          </ng-template>
          <div *ngIf="reqsLoaded" class="table-container">
           <table mat-table [dataSource]="transmissionReqs" class="mat-elevation">
             <ng-container matColumnDef="color">
               <th mat-header-cell *matHeaderCellDef></th>
               <td mat-cell *matCellDef="let transmissionColor" [style.background-color]="transmissionColor"></td>
             </ng-container>

             <ng-container matColumnDef="flag">
               <th mat-header-cell *matHeaderCellDef> FLAG </th>
               <td mat-cell *matCellDef="let action">
                 <div>
                   <mat-checkbox></mat-checkbox>
                </div>
               </td>
             </ng-container>

             <ng-container matColumnDef="Business Unit">
               <th mat-header-cell *matHeaderCellDef> Business Unit </th>
               <td mat-cell *matCellDef="let transmission"> {{transmission.Business_Unit}} </td>
             </ng-container>

             <ng-container matColumnDef="Req ID">
               <th mat-header-cell *matHeaderCellDef> Req ID </th>
               <td mat-cell *matCellDef="let transmission"> {{transmission.Req_ID}} </td>
             </ng-container>

             <ng-container matColumnDef="Vendor">
               <th mat-header-cell *matHeaderCellDef> Vendor </th>
               <td mat-cell *matCellDef="let all"> {{all.Req_Info.Vendor_Name}} </td>
             </ng-container>

             <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
           </table>
          </div>
        </mat-tab>
      </mat-tab-group>
    </mat-chip-list>
  </div>
</div>
<router-outlet></router-outlet>