Question

我有一个嵌套的* Ng用于创建ngb标签集（通常2到4个标签）；数据是通过http（s）调用异步发送到后端Node JS服务器的。选项卡中的数据不正确。即：制表符0、1、2、3将具有与之关联的错误数据。例如，数据将为1,0,3,2。数据刷新有时会以正确的顺序放置选项卡数据。我认为我需要为每个选项卡执行“加载...”操作，并等待异步调用完成。也许有人可以阐明如何解决此问题。

我试图在通话中使用异步/等待功能，但它们似乎不起作用。

ledgers.component.html：

   <ngb-tabset [activeId]="activeTab" (tabChange)="activeTab = $event.nextId" #tabs>
   <ngb-tab *ngFor="let uaccount of useraccounts; let i = index;" title="{{ uaccount.accountname }}" id="{{ uaccount.account_id }}">
   <ng-template ngbTabContent>
   <div  class="transaction_flex_grid trans_item">
    <!-- <div class="col">{{ transaction.transaction_id }}</div> -->
    <!-- Header info here -->
   </div>   

   <!-- Tab data -- sometimes out of order -->
  <div *ngFor="let transaction of trans[i]" class="transaction_flex_grid trans_item" [ngClass]="{'bg-warning': checkDateGtr(transaction.tdate),
                                                             'bg-success': checkDateLsr(transaction.tdate)  }">
    <!-- <div class="col">{{ transaction.transaction_id }}</div> -->
    <div class="col">{{ transaction.tdate | date }}</div>
    <div class="col">{{ transaction.payee }}</div>
    <div class="col">{{ transaction.credit | currency }}</div>
    <div class="col">{{ transaction.debit  | currency }}</div>
    <div class="col">{{ transaction.Balance  | currency }}</div>
    <div class="col">{{ transaction.memo }}</div>
    <div class="col">{{ getCategoryName(transaction.category_id) }}</div>   
  </div>
</ng-template>

ledgers.component.ts：

    async initilizeLedger() {
      await this.us.getUserAccounts()
        .subscribe( async (data : any) => {
        //This was a workaround to load useracconts    
        this.sua = JSON.stringify(data);
        this.useraccounts = JSON.parse(this.sua);

        await this.useraccounts.forEach( async (item, index) => {
        await this.us.getTransactions(index.toLocaleString())
        .subscribe( async (data : any) => {
         //console.log(data);
         await this.trans.push(data);
         });
      });     
    });  
   }

user.service.ts：

   getUserAccounts() {
    let body = {"userdb":"MFT_U7"};
    return this.http.post<IAccount>(environment.apiURL + "/api/getuseraccounts", body, this.httpOptions);
}

    getTransactions(id : string) {
    let myhttpOptions = {
        headers: new HttpHeaders({
            'Content-Type' : 'application/json',
            'Authorization' : 'my-auth-token'
        }),
        params: new HttpParams().set("id", id)
    };
    return this.http.get(environment.apiURL + '/api/gettransactions', myhttpOptions);
}

预期结果是选项卡数据应按关联帐户的顺序排列。实际结果是Edge总是乱序。 Chrome和基于Chromium的指令有时会出现故障。如果您需要更多信息，请告诉我。预先感谢。

ngb标签设置为乱序

0 个答案: