我如何 POST （http 客户端）数据从输入和结果数据显示到 Angular 中的组件？

Question

我 POST 从输入到服务器的组件中的显示数据有问题。在输入中，我需要输入 companyId，然后 POST 请求服务器 return 来自公司的特定数据。在控制台中，我从服务器获得了数据响应，但我不知道如何通过组件中的 *ngFor 循环显示数据。

你知道怎么解决吗？感谢您的帮助。

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

姓名：IT公司

城市：洛杉矶

地区：加州

Id: 36786891 <- 这是 companyId

我的代码：

控制台中服务器的响应：

{
  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>

Answer 1

改变

this.companyId = 回应

至

this.finData = 回应

Answer 2

你有两个问题：

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

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

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

这是一个有效的 StackBlitz

我如何 POST （http 客户端）数据从输入和结果数据显示到 Angular 中的组件？

How I can POST (http client) data from input and result data display to component in Angular?

api

typescript

angular

angular-httpclient