Data in row 1 showing wrong

Hi

  Data in row 1 is returned like below

<div class="card-body">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Sr No</th>
                        <th>Name</th>
                        <th>Contact No</th>
                        <th>Email</th>
                        <th>Alt Contact</th>
                        <th>City</th>
                    </tr>
                </thead>
                <tbody>
                    @for (item of  employeeArray;track $index){
                    <tr >
                        <td>{{$index+1}}</td>
                        <td>{{item.empName}} </td>
                        <td>{{item.empContactNo}}</td>
                        <td>{{item.empEmail}} </td>
                        <td>{{item.empAltContactNo}}</td>
                        <td>{{item.City}} </td>
                    </tr>
                }
                </tbody>
            </table>
        </div>

@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<any> {
      return this.Client.get('onlinetestapi.gerasim.in/api/TeamSync/GetAllEmployee');
  }
}

Thanks