Question

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

<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>

Answer 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之后。

希望这有帮助。

Angular 2在写表行而不是追加！目前正在使用* ngFor

1 个答案: