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

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

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

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

名称：IT公司

城市：洛杉矶

地区:加州

Id:36786891

this.companyId=响应

到

this.finData=response

您有两个问题：

模板使用的变量名称为

finData

，但在您的响应中，您正在用结果填充

companyId

*ngFor

需要一个数据数组，但您的api响应是单个项

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

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

this.apiService.searchByCompanyId（this.finForm.value）.subscribe（response=>{
this.finData=[响应]；//
finData
在
companyId
中插入响应时，数据为空。请在
finData
中插入响应数据。如果这解决了问题，请告诉我。我看不出您在哪里设置finData…看起来您正在将其记录到控制台，但在订阅调用中未设置它。是的，我尝试了此操作，但我已成功->类型“string”不可分配给类型“Fin[]”您是否尝试了
finData.push（response）
？您希望在响应中得到什么？它是否已字符串化？您是否可以发布要返回的数据？如果没有，请检查数据，以确定数组是否是对象的属性。此外，您可能不应该使用ngFor？
export class Fin {
  name: string;
  id: number;
  city: string;
  district: string;
}

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

  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);
    });
  }

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

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