如何将输入和结果数据显示中的 POSThttp 客户端数据发送到 Angular 中的组件？

问题描述

我在从输入端 POST 到服务器的组件中显示数据时遇到问题。在输入中，我需要输入 companyId 并在 POST 请求服务器返回公司的特定数据后。在控制台中，我收到来自服务器的数据响应，但我不知道如何通过组件中的 *ngFor 循环显示数据。

你知道如何解决这个问题吗？感谢您的帮助。

我希望在组件中显示此数据：

名称：IT 公司

城市：洛杉矶

地区：加利福尼亚

Id: 36786891

我的代码：

控制台中服务器的响应：

{
  city: "Los Angeles"
  district: "California"
  id: "36745687"
  name: "IT company"
}

模型：

export class Fin {
  name: string;
  id: number;
  city: string;
  district: string;
}

服务：

searchByCompanyId(companyId){
    return this.http.post(environment.appApiUrl + '/api/url',companyId,{responseType: 'text'});
  }

component.ts：

  finForm: FormGroup;
  finData: Fin[] = [];
  companyId: any;

  constructor(
    private apiService: ApiService,) { }

  ngOnInit(): void {
    this.finForm = new FormGroup({
      companyId: new FormControl()
    });
  }

  submit() {
    this.apiService.searchByCompanyId(this.finForm.value).subscribe( response => {
      this.companyId = response;
      console.log(response);
    });
  }

component.html

<form fxLayout="column" fxLayoutGap="10px" [formGroup]="finForm" (submit)="submit()" class="form">
  <mat-form-field appearance="fill">
    <mat-label>ID</mat-label>
    <input matInput id="companyId" type="number" formControlName="companyId">
  </mat-form-field>

    <button mat-raised-button class="form-button" color="primary" type="submit">search</button>
</form>

<div *ngFor="let item of finData">
  <p>Meno: {{item.name}}</p>
  
  <p>ID: {{item.id}}</p>

  <p>district: {{item.district}}</p>
  
  <p>City: {{item.city}}</p>
</div>

解决方法

你有两个问题：

1. 模板使用的变量名称称为 finData，但在您的响应中，您将使用结果填充 companyId。
2. *ngFor 需要一组数据，但您的 api 响应是单个项目。

您可以通过一个简单的更改轻松解决这些问题：

 this.apiService.searchByCompanyId(this.finForm.value).subscribe(response => {
   this.finData = [response];  // <-----
   console.log(response);
 });

这是一个有效的 StackBlitz

,

改变

this.companyId = 响应

到

this.finData = 响应