Data in row 1 showing wrong

Hi

  Data in row 1 is returned like below

            
                    @for (item of  employeeArray;track $index){
                    
                }
                

                

                    

                        
Sr No
                        
Name
                        
Contact No
                        
Email
                        
Alt Contact
                        
City
                    
                
                

                        
{{$index+1}}
                        
{{item.empName}} 
                        
{{item.empContactNo}}
                        
{{item.empEmail}} 
                        
{{item.empAltContactNo}}
                        
{{item.City}} 
                    
            
        

@Component({
  selector: 'app-employee',
  standalone: true,
  imports: [],
  templateUrl: './employee.component.html',
  styleUrl: './employee.component.css'
})
export class EmployeeComponent implements OnInit {
  employeeArray: any[] = [];
  constructor(private empSrv:EmployeeService){}

  ngOnInit():void{
    this.loadAllEmployee();
  }
  loadAllEmployee(){
    this.empSrv.getallEmployee().subscribe((res:any)=>{
      this.employeeArray = res.data;
      
    })
  }

Service
*******

export class EmployeeService {

  constructor(private hClient: HClient) { }

  getallEmployee(): Observable {
      return this.Client.get('onlinetestapi.gerasim.in/api/TeamSync/GetAllEmployee');
  }
}

Thanks