如何将 Api 中的值绑定到 Angular 表单

Question

我创建了一个角度表单，它将值发送到 webapi 并在提交时在表单下方打印收到的值。

尝试.component.html：

<div class="container">
  <form [formGroup]="form" (submit)="onSubmit()" class="mb-3"> 
  <!-- <form class="mb-3"> -->
    <div class="mb-3" class="row">
        <label for="bike" class="form-label fw-bold">Bike:</label>
        <input type="text" class="form-control" id="bike" formControlName="bike" placeholder="Enter your Bike name">
      </div> 
    <button type="submit" class="btn btn-primary mr-1">Submit</button>
  </form> 
<br>
  <br>
<div class="table-responsive">
<table class="table table-bordered" role="grid">
    <thead class="bg-primary">
      <tr>
        <th>Bike Name</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let name of names">
        <td>
          <input type="text" [(ngModel)]="name.bike" name="bike">
        </td>
      </tr>
    </tbody>
  </table>

    </div>
  
</div>

尝试.component.ts：

export class TryComponent {
  names: any[] = [];
  form: FormGroup;
 
  constructor(private fb: FormBuilder, private namesService: NamesService) {
    this.form = this.fb.group({
      bike: ['', [Validators.required, Validators.minLength(3)]]
    });
    this.namesService.getBikes();
  }
  Reset(){
    this.form.reset();
  }
  onSubmit() {
    this.form.controls['bike'].markAsTouched();
    if (this.form.valid) {
      const data={
        ...this.form.value,
        }
    console.log(data);                 
    this.namesService.addBike(data).subscribe(response => {
      console.log(response);
      this.namesService.getBikes().subscribe(names => {
        this.names = names;
        console.log(this.names);
        console.log("success");
      });
    });
  }
}
}
 

名称.service.ts：

export class NamesService {
  

  constructor(private http: HttpClient) { }

  addBike(nameData : any): Observable<any>{
    return this.http.post<any[]>('https://localhost:7006/api/Names/submit-form',nameData);
  }
  getBikes(): Observable<any[]> {
    return this.http.get<any[]>('https://localhost:7006/api/Names/get-form-data');
  }

}

问题不在于 API，因为我可以在控制台上将输入的值作为数组打印（使用 swagger 测试时效果很好）。即使在导入必要的模块后，我也无法绑定该值和将其显示在表单下方。我想问题在于数组没有用前端接收到的值或我绑定的方式更新。

有人可以告诉我我哪里出了问题吗？

Answer 1

按如下方式修改您的

TryComponent

：

import { Component, OnInit } from '@angular/core'; // Import OnInit
// ... other imports ...

export class TryComponent implements OnInit { // Implement OnInit

  names: any[] = [];
  form: FormGroup;

  constructor(private fb: FormBuilder, private namesService: NamesService) {
    this.form = this.fb.group({
      bike: ['', [Validators.required, Validators.minLength(3)]
    });
  }

  ngOnInit() {
    this.namesService.getBikes().subscribe(names => {
      this.names = names;
    });
  }

  // ... rest of your component code ...
}

通过实现

OnInit

，您可以确保在初始化组件时进行

getBikes()

调用。

在

names

方法中成功添加自行车后，请务必更新

onSubmit()

数组：

onSubmit() {
  this.form.controls['bike'].markAsTouched();
  if (this.form.valid) {
    const data = {
      ...this.form.value,
    };

    this.namesService.addBike(data).subscribe(response => {
      console.log(response);

      this.namesService.getBikes().subscribe(names => {
        this.names = names; // Update the names array
        console.log(this.names);
        console.log("success");
      });
    });
  }
}