如何循環通過 Angular HTTP 響應？

Question

我是 Angular 的初學者，試圖學習細節。 我正在上傳文件並調用驗證文件的 API。 在響應中是基於文件的某些值返回的 JSON 驗證錯誤列表。

我試圖遍歷這些響應並將它們顯示給用戶，但我有點迷茫。

我嘗試了 map/pipe/subscribe 的組合，似乎 subscribe 功能對我來說效果最好，這是我可以看到發送的值是什么的唯一方法。 但我不確定如何顯示實際值而不是 [Object, Object]。

我也在嘗試學習最佳實踐，所以我不確定我是否走在正確的道路上。

返回我的 POST 代碼后我應該做什么？

this.httpClient.post(this.PartsAPIURL, formData, { headers: headers })
      .subscribe(event => {
        this.submissionResult = event;
        console.log(this.submissionResult);
        //what to do here?
    });

以及如何將它與 HTML 響應結合起來？

<p>{{submissionResult}}</p>

這是我一直在嘗試的一些失敗的代碼片段

嘗試分配給數組變量

this.httpClient.post(this.PartsAPIURL, formData, { headers: headers })
      .subscribe(event => {
        //fails because the validationErrors and subcategoryErrors are not initialized properly
        this.UploadResponse.validationErrors = event["validation_errors"];
        this.UploadResponse.subcategoryErrors = event["subcategory_errors"];
        console.log(this.UploadResponse.validationErrors);
        console.log(this.UploadResponse.subcategoryErrors);
    });

不返回任何東西 - 根本沒有控制台語句

this.httpClient.post<PartsUploadResponse>(this.PartsAPIURL, formData, { headers: headers })
      .pipe(
        map(data => {
          console.log(data)
          this.UploadResponse.subcategoryErrors = data['subcategoryErrors'];
          this.UploadResponse.validationErrors = data['validationErrors'];
          console.log(this.UploadResponse);
        }));

響應類

export class PartsUploadResponse {
  public validationErrors: any;
  public subcategoryErrors:any;

}

感謝您的幫助！

Answer 1

讓我們定義您的響應類型，以便打字稿編譯器可以向您顯示任何錯誤：

type ErrorResponse = {
  subcategory_errors: ErrorList[],
  validation_errors: ErrorList[]
}

type ErrorList = {
  sheet: string,
  errors: string[]
}

我們可以將錯誤列表分配給局部變量，如下所示：

subcategoryErrors: ErrorList[] = [];
validationErrors: ErrorList[] = [];

ngOnInit() {
  this.httpClient.post(this.PartsAPIURL, formData, { headers: headers })
      .subscribe((data: ErrorResponse) => {
        this.subcategoryErrors = data.subcategory_errors;
        this.validationErrors = data.validation_errors;
    });
}

您可以使用*ngFor指令遍歷數組並顯示 html。 使用ng-container包含多個 html 元素，而無需添加額外的div 。

<h1>Subcategory Errors></h1>
<ng-container *ngFor="let errorList of subcategoryErrors">
  <h2>{{ errorList.sheet }}</h2>
  <p *ngFor="let error of errorList.errors">{{ error }}</p>
</ng-container>

<h1>Validation Errors></h1>
<ng-container *ngFor="let errorList of validationErrors">
  <h2>{{ errorList.sheet }}</h2>
  <p *ngFor="let error of errorList.errors">{{ error }}</p>
</ng-container>

Answer 2

首先，您使用 pipe/map 操作符實現的代碼是正確的，但是 pipe/map 操作符根本不調用 api，您必須訂閱從 http post 方法返回的 observable。

其次，在您訂閱了從 http post 返回的 observable 之后，您從 API 獲取對象並將其綁定到 html。

TS代碼：

this.httpClient.post<any>(this.PartsAPIURL, formData, { headers: headers })
      .subscribe(result=> {
        this.submissionResult = result;
        console.log(this.submissionResult);
        //what to do here?
    });

顯示的'object object'是因為您沒有正確實現 html。
html 不知道如何顯示submissionResult對象中的所有屬性

為了顯示對象的內部屬性，只需添加應該顯示對象內部屬性的元素：

html代碼：

<p *ngIf="submissionResult">
    <div *ngFor="let validErrors of submissionResult.validationErrors">
      <div *ngFor="let error of validErrors">
         <span>{{error}}</span>
     </div>
   </div>
</p>