Looping through HTTP called data in Angular

apiservice.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

enum Snippets {
  skills = "skills-names",
  workers = "workers-list",
  workers_by_skill = "workers-list-by-skill",
}

@Injectable({
    providedIn: 'root'
})
export class APIService {
    private readonly server: string = "https://SERVER/workers";

    constructor(private readonly http: HttpClient)
    {
    }

    private url(snippet: Snippets)
    {
        return this.server + "/" + snippet + ".php?r="+Math.random();
    }
    
    workers(): Observable<WorkerDTO[]>
    {
        return this.http.post<WorkerDTO[]>(this.url(Snippets.workers), {});
    }

    skilled_workers(skill_id: string) {
        return this.http.post<WorkerDTO[]>(this.url(Snippets.workers_by_skill), {});
    }
}

skills.html

<h2>List of Skills</h2>

<ul class="w3-ul">
@for (skill of skills(); track skill.id) {
    <li onkeypress="" (click)="workers_by_skill_id(skill.id)">{{ skill.name }}</li>
} @empty {
    <li>No skills found.</li>
}
</ul>

<h2>Available workers for this skill set</h2>
<ul class="w3-ul">
@for(worker of workers_by_skill(); track worker.id)
{
    <li>{{worker.name}}</li>
} @empty {
    <li>No workers found.</li>
}

skills.ts

import { Component, signal} from '@angular/core';
import { APIService } from '../apiservice';

@Component({
  selector: 'app-skills',
  imports: [],
  templateUrl: './skills.html',
  styleUrl: './skills.scss',
})
export class Skills {
  skills = signal<SkillDTO[]>([]);
  workers_by_skill = signal<any>(null);

  constructor(private readonly api: APIService)
  {
    this.fetch_default_skills();
  }

  private fetch_default_skills(): void
  {
    this.api.skills().subscribe({
      next: (response: SkillDTO[]) => { this.skills.set(response); },
      error: (error) => console.log(error),
    });
  }

  workers_by_skill_id(skill_id: string)
  {
    this.api.skilled_workers(skill_id).subscribe({
      next: (response: WorkerDTO[]) => this.workers_by_skill.set(response),
      error: (error: any) => console.log(error),
    });
  }
}