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

名称和用法是存储值的数组。在我的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）。这也是因为您已将type="number"添加到input字段中。

这将导致以下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，解决了我之前提到的所有问题。

表格未预先填充Angular 8

1 个答案: