仅从对象数组中返回一个 ID（REST API）

Question

尝试仅返回一个 ID，当单击编辑银行表单时，它将启动获取银行列表 API，我想从该特定 API 返回其中的银行 ID，以便在另一个 API 调用中使用它。有人能指出我的代码有什么问题吗？为什么？

id: any;

getBankId(){
    // Get ID
    this.service.GetBankList(this.uid)
    .subscribe((banko:bankListDTO) => {
    return this.id = banko.id,
    console.log('should be bank ID', this.id);
    })
  }

我在控制台中收到此错误

谢谢你的好意

更新代码

HTML

<div class="animated fadeIn">
  <div class="row">
      <div class="col-12">
          <div class="card">
              <div class="card-header">
              Bank list

              <div class="card-header-actions">
                <button type="button" class="btn btn-block btn-primary" data-toggle="modal" (click)="openModal(template , this.isAddMode=true)">Add New Bank</button>
            </div>
              </div>
              <div class="card-body">
                <form [formGroup]="bankForm" novalidate>
                  <table datatable #dtable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th>Bank name</th>
                          <th>Holder name</th>
                          <th>Account number</th>
                          <th>isdefault</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let item of this.bankList">
                          <td>{{item.bankName}}</td>
                          <td>{{item.holderName}}</td>
                          <td>{{item.bankAccountNumber}}</td>
                          <td>{{item.isDefault}}</td>
                          <td>
                            <div class="btn-group" dropdown>
                              <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
                                      aria-controls="dropdown-basic">
                                Action <span class="caret"></span>
                              </button>
                              <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                                  role="menu" aria-labelledby="button-basic">
                                <li role="menuitem"><button (click)="openModal(template , this.isAddMode=false)" class="dropdown-item" >Edit</button></li>
                                <li role="menuitem"><button class="dropdown-item" (click)="this.removeBank(item.id)" >Remove</button></li>
                              </ul>
                            </div>
                          </td>
                        </tr>
                        </tbody>
                        </table>
                </form>
              </div>
          </div>
      </div>
  </div>
</div>

<!-- "this.loadDetail(item.id)" -->

<!-- Add/Edit form Modal -->
<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left" *ngIf="isAddMode">Add Bank</h4>
    <h4 class="modal-title pull-left" *ngIf="!isAddMode">Edit Bank</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form [formGroup]="this.bankForm" >
      <div class="row">
          <div class="col-sm-12">
              <div class="form-group">
                  <label for="inputName" class="label">Bank Name</label>
                  <input type="text" class="form-control" fullWidth id="inputName"
                      formControlName="bankName" placeholder="bank Name">
              </div>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
                <label for="inputName" class="label">Holder Name</label>
                <input type="text" class="form-control" fullWidth id="inputName"
                    formControlName="holderName" placeholder="holder Name">
            </div>
        </div>
        <div class="col-sm-12">
          <div class="form-group">
              <label for="inputName" class="label">Bank Account Number</label>
              <input type="text" class="form-control" fullWidth id="inputName"
                  formControlName="bankAccountNumber" placeholder="bank account number">
          </div>
      </div>

      <div class="col-sm-12">
        <div class="form-group">
          <mat-slide-toggle formControlName="isDefault">Default bank account</mat-slide-toggle>
        </div>
      </div>
      </div>
    </form>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="modalRef.hide()">Close</button>
      <button type="submit" class="btn btn-primary" value="Submit" (click)="onSubmit()" [disabled]="!bankForm.valid">Save</button>
      <!-- <button type="button" class="btn btn-primary" (click)="this.saveBank()" [disabled]="!this.bankForm.valid">Save changes</button> -->
  </div>
  </div>
</ng-template>

组件.ts

// Stack Overflow
  async getBankId(){
    // Get ID
    await this.service.GetBanko(this.uid)
    .then((banko:any) => {
    this.id =+ banko.filter((x,index) => index ==0).map( x => x.id).join();
    console.log('should be bank ID', this.id);
    })
  }

service.ts

public async GetBanko(uid) {
      return await this.httpClient.get(environment.host + 'therapist-bank/bank/' + uid).toPromise();
    }

Answer 1

您可以使用 async-await 从服务器获取数据，当您的请求完成并且 id 可用时，它将为下一次调用工作。

为More

id: any;
async getBankId(){
    // Get ID
   await this.service.GetBankList(this.uid)
    .then((banko:bankListDTO) => {
     this.id =+banko.filter((x,index)=> index==0).map(x=> x.id).join(); 
    console.log('should be bank ID', this.id);
    })
  }


/// service method will be added async-await

public async GetBankList(){
    return await this.http.get<any>(this.baseUrl).toPromise();
}