Angular 如何将数据从API加载到输入字段？

我想做一个“用户配置文件”页面。它应该将注册用户的所有数据加载到输入字段（如果数据存在）。然后每个人都可以编辑这些（或添加新的）。第一步是将数据加载到特定的输入字段。我成功地发出了一个

GET

请求（控制台中一切正常），但输入字段仍然为空

Get

请求后的页面：

组成部分：

getData() {
    this.apiService.getUser(this.id, this.email, this.password).subscribe(
      (user) => {
        this.user = user;
        this.bankArray.push(user.banks);
      },
    );
  }

HTML:

名称




财政的
+
-

控制台日志（用户）：

---

这可能会发生，从API获得响应后，您的html没有更新

<ng-container *ngIf="bankArray.length">
  <div *ngFor="let obj of bankArray; let i = index">
    <button (click)="removeBank(i)">-</button>
    <br />
    <input
      type="text"
      placeholder="Bank name"
      name="bankName{{ i }}"
      [(ngModel)]="obj.bankName"
    /><br />
    <input
      type="number"
      placeholder="IBAN"
      name="iban{{ i }}"
      [(ngModel)]="obj.iban"
    /><br />
   </div>
 </ng-container>

您应该使用

*ngIf

来确保从API获得响应后更新html

<ng-container *ngIf="bankArray.length">
  <div *ngFor="let obj of bankArray; let i = index">
    <button (click)="removeBank(i)">-</button>
    <br />
    <input
      type="text"
      placeholder="Bank name"
      name="bankName{{ i }}"
      [(ngModel)]="obj.bankName"
    /><br />
    <input
      type="number"
      placeholder="IBAN"
      name="iban{{ i }}"
      [(ngModel)]="obj.iban"
    /><br />
   </div>
 </ng-container>

-

我注意到您正在从response中将银行的详细信息推送到银行阵列

由于banks是一个元素数组，您无法直接将整个数组推入bankArray，因此必须迭代/循环这些组，并将它们逐个插入bankArray

这是更新后的代码

getData() {
this.apiService.getUser(this.id, this.email, this.password).subscribe(
  (user) => {
    this.user = user;
    user.banks.forEach(bank => {
         this.bankArray.push(bank);   
    });
  },
);

}

---

关于个人数据，如果您看到您附加的控制台日志个人数据为空

您是否从api获取响应？是的，我正在获取.in get数据您正在分配给用户，但在ngModel中您希望从个人获取数据？什么是个人，然后写obj.title而不是personel.title，这样你就可以安慰自己了。这个用户也可以拍照和分享吗？谢谢！这就是问题所在。