如何循环通过 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>

这是我一直在尝试的一些失败的 sn-ps 代码

尝试分配给数组变量

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

首先，你用管道/地图操作符实现的代码是正确的，但是管道/地图操作符根本不调用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>

Answer 2

让我们定义您的响应类型，以便打字稿编译器可以向您显示任何错误：

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">{{ 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">{{ error }}</p>
</ng-container>