Question

我正在尝试使用要从包含一些字符串数组的组件中填充的表行在Angular中创建一个表。但是，我遇到一个问题，我只能得到一行数据，而那条数据是字符串数组中的最后一个元素。

我尝试实现一个测试数组，在该数组中我仅在具有伪数据的组件中创建一个字符串数组（在组件代码中称为testarray）。当我用ng For循环尝试此操作时，所有数据都会通过。但是当我输入真实数据时，它的功能如上所述。

** HTML模板**

 <table class="table table-hover">
          <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Region</th>
            <th scope="col">Instance Type</th>
            <th scope="col">Instance State</th>
            <th scope="col">Architecture</th>
            <th scope="col">CPU</th>
            <th scope="col">Monitoring</th>
            <th scope="col">Hypervisor</th>
            <th scope="col">Image ID</th>
            <th scope="col">Public IP</th>
          </tr>
          </thead>
          <tbody *ngIf="ec2Response">
            <tr *ngFor="let id of ec2Response.instanceIDList; index as i">
              <th scope="row">{{id}}</th>
            </tr>
          </tbody>
        </table>

**组件代码**

export class Ec2Component implements OnInit {

  public ec2Response: Ec2;
  public testarray: string[] = ['23', '45', '25'];

  constructor(private ec2Service: Ec2Service) { }

  ngOnInit() {

    this.ec2Service.getEC2List().subscribe((data: Ec2) => {
      this.ec2Response = data;
      console.log(this.ec2Response);
    });
  }
}

**服务代码**

export class S3Service {

  baseURL = environment.apiURL;
  listURL = this.baseURL + '/api/s3/buckets/list';

  constructor(private http: HttpClient) { }

  getS3List() {
    return this.http.get(this.listURL);
  }
}

** JSON响应**

{
    "instanceID": "XXXXXXXXXXX",
    "instanceState": null,
    "instanceAverageCPU": "NaN",
    "accountCPUUtilization": XXXXXX,
    "instanceAverageNetworkOut": "NaN",
    "accountAverageNetworkOut": XXXXX,
    "instanceIDList": [
        "XXXXXXX",
        "XXXXXXX",
        "XXXXXXX"
    ],
    "imageIDList": [
        "XXXXXXX",
        "XXXXXXX",
        "XXXXXXX",
    ],
}

Answer 1

您的响应和对html的绑定不正确。修改其中之一，即

HTML：

<table class="table table-hover">
          <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Region</th>
            <th scope="col">Instance Type</th>
            <th scope="col">Instance State</th>
            <th scope="col">Architecture</th>
            <th scope="col">CPU</th>
            <th scope="col">Monitoring</th>
            <th scope="col">Hypervisor</th>
            <th scope="col">Image ID</th>
            <th scope="col">Public IP</th>
          </tr>
          </thead>
          <tbody *ngIf="ec2Response">
            <tr *ngFor="let res of ec2Response; index as i">
              <th scope="row">{{res.instanceID}}</th>
              <th scope="row">{{res.instanceAverageCPU}}</th>
                <th scope="row">{{res.instanceState}}</th>
                 <th scope="row">{{res.accountCPUUtilization}}</th>
            </tr>
          </tbody>
        </table>

回复：

[
     { 
    "instanceID": "XXXXXXXXXXX",
    "instanceState": "AAAAAA",
    "instanceAverageCPU": "BBBBBBB",
    "accountCPUUtilization": "XXXXXX",
    "instanceAverageNetworkOut": "CCCCC",
    "accountAverageNetworkOut": "XXXXX",
    "instanceIDList": [
        "XXXXXXX",
        "XXXXXXX",
        "XXXXXXX"
    ],
    "imageIDList": [
        "XXXXXXX",
        "XXXXXXX",
        "XXXXXXX",
    ],
   },
   { 
    "instanceID": "XXXXXXXXXXX",
    "instanceState": null,
    "instanceAverageCPU": "NaN",
    "accountCPUUtilization": "XXXXXX",
    "instanceAverageNetworkOut": "NaN",
    "accountAverageNetworkOut": "XXXXX",
    "instanceIDList": [
        "XXXXXXX",
        "XXXXXXX",
        "XXXXXXX"
    ],
    "imageIDList": [
        "XXXXXXX",
        "XXXXXXX",
        "XXXXXXX",
    ],
   }
   ]

结果：

Answer 2

所以我弄清楚了这个问题是怎么回事。上面提供的代码按预期的方式工作，其中提到了许多注释。 JSON文件已正确提取，并且上面提供的代码完全按预期工作。但是，在确保仅提供SO所需的代码段的情况下，我省略了在组件代码中的API调用之后发生的2个其他API调用。这两个额外的调用以不希望的方式调整了我的ec2Response对象。因此，我看到了正确的数据一秒钟，在进行其他调用时闪烁，并且看到了错误的数据。我将有问题的API调用放在getEc2List调用之前，现在数据可以按预期通过。

ng For循环仅从数组返回最后一个值

2 个答案: