表单未预先填充Angular 8

Question

我有一个返回对象数组的 API 服务。每个对象都有两个字段名称和用法。我正在动态创建一个表单，其中表单字段的数量等于数组中的对象数量。表单字段的名称是name，它应该预先填充usage 值。我能够创建表单并命名表单字段，但 usage 值未在每个表单字段中显示正确的值。 我的 TS 文件代码：

ngOnInit() {
    this.apiCall.getArray()
    .subscribe(
      (res: any) => {
        this.receivedData = res;
        for (let i = 0; i < this.receivedData.length; i ++){
          this.currentName  = this.receivedData[i].name;
          this.currentUsage = this.receivedData[i].usage;
          this.name.push(this.currentName);
          this.usage.push(this.currentUsage);
        }

name 和usage 是存储值的数组。在我的 HTML 中：

<form>
    <div class="form-row">
      <div class="form-group *ngFor="let plans of name">
        <label>{{plans}}</label>
        <input type="number" min="0" class="form-control" id="usage" name="usage" value="usage" [(ngModel)]="usage">
      </div>
      </div>
      </form>

现在我的表单字段显示正确的字段名称，但字段为空。它们应预先填充各自的使用值，并且用户应该能够根据需要更改值。

Answer 1

我认为您的代码存在一些问题。

首先，如果您想为 Angular *ngFor 循环中的属性赋值，您需要执行类似 item.foo 的操作。接下来，需要方括号[] 才能将值实际传递给属性并循环遍历数据数组，因为数据是动态的。

最后一个问题是您不能将数字（我假设item.usage 将是number）分配给像id 和name 这样的字符串。这也是因为您在input 字段中添加了type="number"。

这将导致以下 HTML 设置。我正在使用let item of items 循环遍历数据并选择我需要它们的键。

<form>
    <div class="form-row">
      <div class="form-group" *ngFor="let item of items">
        <label>{{item.name}}</label>
        <input type="number" min="0" [id]="item.name" [name]="item.name" class="form-control" [(ngModel)]="item.usage">
      </div>
  </div>
</form>

使用一些模拟数据，结果证明它可以工作。

  received = [
  {
    name: 'Field 1',
    usage: 123456,
  },
  {
    name: 'Field 2',
    usage: 4655454,
  },
  {
    name: 'Field 3',
    usage: 54445,
  }];

请参阅 this StackBlitz example 获取一个工作示例，解决我之前提到的所有问题。