ngFor 未正确填充值

Question

当我尝试在 ul 标记内使用 ngFor 时，我正在尝试用数据库中的值填充下拉列表，它只显示第一个值，但它应该显示两个值，因为我在数据库中有两个值GET 请求也给了我一个大小为 2 的数组。所以我试图将 ngFor 保留在其他标签中，然后它给了我两个值，但所有内容都以 2 个数字出现，因为 for 循环正在工作，它正在复制所有内容。

模板

<div class="dropdown">
  <button (click) = "dd()" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Select Doctor
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" *ngFor="let d of doctor">
    <li><a class="dropdown-item" href="#">{{d.name}}</a></li>
  </ul>
</div>

component.ts

  patientForm: FormGroup;
  doctor: Doctor[];

  constructor(private doctorService: DoctorService) { }

  ngOnInit(): void {
    this.patientForm = new FormGroup({
      name: new FormControl('', [Validators.required]),
      illness: new FormControl('', [Validators.required]),
      // doctorId: new FormControl('', [Validators.required])
    })
    this.doctorService.getDoctor().subscribe(data=>{
      this.doctor = data;

      // checking if the data is coming and going into the array
      console.log(this.doctor);
    })
  }

这是我在控制台中得到的内容

  (2) [{…}, {…}]
  0: {id: 1, name: "Dr.Subhajit", degree: "MD", specialization: "Heart"}
  1: {id: 2, name: "Dr.Tamanash", degree: "MD", specialization: "Brain"}
  length: 2
  __proto__: Array(0)

这是我的服务

  private getApi: string = 'http://localhost:8080/doctor'
  constructor(private http: HttpClient) { }

  public getDoctor() : Observable<Doctor[]>{
    return this.http.get<Doctor[]>(this.getApi);
  }

Answer 1

当我对 2 位医生的数组进行硬编码时，您的示例对我来说效果很好。

参见my example on stackblitz。

但是，我会将 *ngFor 移动到

元素。现在您正在创建多个无序列表。

问题一定出在你的服务的某个地方，或者在后端。

尝试打印您从服务中获取的数据：

this.doctorService.getDoctor().subscribe(data=>{
  console.log(data);
  this.doctor = data;
})

并查看您从浏览器开发工具中的服务返回的内容。

ngFor 未正确填充值

ngFor is not populating values properly

ngfor

angular