Angular 2 覆盖写表行而不是追加！当前使用 *ngFor答案

【问题标题】：Angular 2 over write table row instead of appending ! Currently using *ngForAngular 2 覆盖写表行而不是追加！当前使用 *ngFor
【发布时间】：2017-05-30 14:57:31
【问题描述】：

实际上我试图将每个服务对象表示为一个表行，但是当我再次调用我的 javascript 函数时，*ngFor 创建将另一组行附加到现有行。

<tr class="table table-hover  table-responsive "  *ngFor="let service of services">
          <td>{{ service.serviceName }}</td>
          <td>{{ service.state }}</td>

          <td>{{ service.domainName }}</td>
          <td>{{ service.releaseVersion }}</td>
          <td>{{ service.editionDisplayName }}</td>
          <td>{{ service.creationDate }}</td>

// 表格行被追加而不是覆盖！

JQuery 对象解析！

onCreateServer(){
this.serverCreationStatus = 'Server Instance Created! ' + this.serverName;
    return this.http.get('http://127.0.0.1:5000/PodChecker/', {params:
    {Podurl: this.serverName
    }}).subscribe( (response: Response) => {
        console.log(response);
      const data = response.json();
        console.log(data);
        this.Service_Instances = data;
        this.dict = data;
        console.log('Data[services]' + JSON.stringify(data['services']));
        console.log(this.dict);
        this.Service_Instances = this.dict['services'];
        //this.setValues(this.dict['services']);
        console.log('Must Check' + JSON.stringify(this.setValues(this.dict['services'])));
        console.log('This Services Output:' + JSON.stringify(this.services ));

      },
      (error) => console.log(error)
    );
  }

设置值功能

setValues(array){

const jsonVal = array;
console.log('This is a surprise!!' + JSON.stringify(jsonVal.keys));


   jQuery.each( array, ( key, value ) => {
    console.log('Jquery Output 1st' + key + ': ' + value.state );
    console.log('Jquery Output 1st' + key + ': ' + value.serviceName );
    console.log('Jquery Output 1st' + key + ': ' + value.domainName );
    console.log('Jquery Output 1st' + key + ': ' + value.releaseVersion );
    console.log('Jquery Output 1st' + key + ': ' + value.creationDate );
    console.log('Jquery Output 1st' + key + ': ' + value.BI_SERVICE_URL );
    console.log('Jquery Output 1st' + key + ': ' + value.editionDisplayName );
     console.log('GEtting Essbase values' + JSON.stringify(value.components.BI.attributes.profile_essbase.value));
     this.services.push(new ServerProperties(JSON.stringify(value.serviceName), JSON.stringify(value.state),
       JSON.stringify(value.domainName), JSON.stringify(value.releaseVersion),
JSON.stringify(value.editionDisplayName),
});
}

调用函数！

<input type="text"
       class="form-control"
       [(ngModel)]="serverName"
>
<button class="btn btn-primary pull-left"  (click)="onCreateServer()">Get Details</button>

【问题讨论】：

您如何填充services？你在更新它吗？
我正在点击 rest url 并获得响应，我正在放置响应 JS 对象。
空services array，然后在rest url响应中写入新数据。
@Satpal 你有什么解决方案吗？
@anoop 如果我清空 js 对象，之前的数据不会被覆盖！

标签： javascript angular typescript angular-directive

【解决方案1】：

每次像这样调用 onCreateServer() 时尝试设置您的 this.services = []

onCreateServer(){
this.serverCreationStatus = 'Server Instance Created! ' + this.serverName;
    return this.http.get('http://127.0.0.1:5000/PodChecker/', {params:
    {Podurl: this.serverName
    }}).subscribe( (response: Response) => {
      this.services= [];
//... more code

而不是在你调用 setValues 之后。

希望这会有所帮助。

【讨论】：