angular dom old items not being removed

Question

I have an issue with my code. After sending a subscribe to an API i receive a new data but my DOM just adds new data into it not removing the old data. I looked into my array containing data and it had the correct result. My list in DOM had result + old results from previous subscribes. Do i have to manually delete these data or send a request to Angular to refresh the content ?

Here is my code :

<form [formGroup]="search">
    <input type="text" class="input-form" [(ngModel)]="pna" (keyup)="pnaEvent()" formControlName="PNA" id="PNA">
    <label for="PNA">PNA</label>
</form>

    <ul id="logs">
        <li *ngFor="let d of data">
      {{d.info}}
        </li>
    </ul>

pnaEvent(){
   if(this.pna.length > 2)  {          
      let uri = "path";
      this.apiService.get(uri).subscribe(
        (res) => {
           this.data = new Array();
           this.data = res;
           this.changeDetectorRef.markForCheck();
      });           
   }   
}