Angular：更改动态表的执行顺序答案

【问题标题】：Angular: Change Order of Execution for Dynamic TableAngular：更改动态表的执行顺序
【发布时间】：2019-08-19 17:33:00
【问题描述】：

我必须在 (change) 事件的下拉列表中显示数据。最初，表格将被隐藏。在(change) 上将调用API 以相应地获取数据。

问题 (IMO)： 该表是在我们从后端获取数据之前加载的，因为该表显示了两行没有数据的行。还是我遗漏了什么？

<form [formGroup]="fooForm" >  
<select formControlName="fooName"  (change)="chnageCall()">
  <option value="1">1</option>
  <option value="2">2</option>
</select>


<table *ngIf = "isData == true" class="hover"  id="dataTable" width="100%" cellspacing="0">

  <thead class="table table-bordered">
    <tr>
      <th>FirstName</th>
      <th>LastName</th>
    </tr>
  </thead>
  <tr  *ngFor="let data of resData" class="table table-bordered">
    <td>{{data.body.list[0].firstname}}</td>
    <td>{{data.body.list[1].lastname}}</td>
  </tr>

</table>

组件

import { Component, OnInit } from '@angular/core';
import { TestService } from '../test.service';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
fooForm : FormGroup
foo : any
resData: any
isData : boolean = false;

  constructor(private formbulider: FormBuilder,private testService : TestService) { this.isData = false; }

  ngOnInit() {
    this.foo = ['foo1', 'foo2', 'foo3']   
    this.fooForm = this.formbulider.group({
      fooName : [null],  
    });
  }

  chnageCall()
  {
    console.log("Chnage")
    this.testService.test().
    subscribe(
      data=>
      {
        this.resData=data;
        this.isData = true;
        console.log("foo1: "+this.resData.body.list[0].firstname)
        console.log("foo2: "+this.resData.body.list[1].firstname)
        console.log("Json: "+JSON.stringify(this.resData))
        console.log("respData "+JSON.stringify(this.resData.body.list))
      },
      error=>
      {
        console.log(error)
      }
     )
  }
}

初始页面

(change)已被调用并成功从后端获取数据，但表没有动态添加数据

实际输出

控制台

Chnage
    test.component.ts:34 foo1: Foo1
    test.component.ts:35 foo2: Foo2
    test.component.ts:36 respData [{"id":1,"firstname":"Foo1","lastname":"Bar1"},{"id":2,"firstname":"Foo2","lastname":"Bar2"}]

预期输出（在调用(change) 之后）_

JSON

{  
   "headers":{  
      "normalizedNames":{  

      },
      "lazyUpdate":null
   },
   "status":200,
   "statusText":"OK",
   "url":"http://localhost:8888/app/all",
   "ok":true,
   "type":4,
   "body":{  
      "list":[  
         {  
            "id":1,
            "firstname":"Foo1",
            "lastname":"Bar1"
         },
         {  
            "id":2,
            "firstname":"Foo2",
            "lastname":"Bar2"
         }
      ],
      "message":"Test Message",
      "httpStatus":"OK"
   }
}

【问题讨论】：

标签： angular spring-boot dynamic angular8

【解决方案1】：

您试图在模板中错误地显示数据。

{{data.body.list[0].firstname}} 尝试访问第一个列表元素的名字，
{{data.body.list[1].lastname}} 尝试访问第二个列表元素的姓氏。

相反，您需要遍历 data.body.list，然后在每个中访问该元素的名字/姓氏字段。

<tr *ngFor="let data of resData.body.list" class="table table-bordered">
  <td>{{data.firstname}}</td>
  <td>{{data.lastname}}</td>
</tr>

【讨论】：