Zamiana input-a na listę rozwijaną.

Elo wszystkim mam formatkę w której mam input o nazwie category i chcę zmienić ten input na listę rozwijaną pobieraną z mojego api.
tak wygląda input

    <div class="form-group">
          <label for="category">Category</label>
          <input
            type="text"
            class="form-control"
            id="category"
            required
            [(ngModel)]="job.category"
            name="category"
          />
        </div>

a tak sam to przerobiłem i nie działa

 <div class="form-group">
        <label for="category">Category</label>
      <select>
        <option *ngFor="let category of myCategories" [ngValue]="category"
                type="text"
                class="form-control"
                id="category"
                required [(ngModel)]="job.category"
                name="category">
          {{ category }}
        </option>
      </select>
    </div>

dodaje component ts

@Component({
  selector: 'app-add-jobs',
  templateUrl: './add-jobs.component.html',
  styleUrls: ['./add-jobs.component.css']
})
export class AddJobsComponent implements OnInit {

  myCategories = this.retrieveCategories();

  job = {
    title: '',
    category: '',
    endDated: '',
    email: '',
    published: false
  };
  submitted = false;


  constructor(private jobService: JobService, private categoryService: CategoryService) {
  }

  ngOnInit(): void {
    this.retrieveCategories();
  }

  saveJob() {
    const data = {
      title: this.job.title,
      category: this.job.category,
      company: this.job.company,
      city: this.job.city,
      description: this.job.description,
      endDated: this.job.endDated,
      email: this.job.email
    };

    this.jobService.create(data)
      .subscribe(
        response => {
          console.log(response);
          this.submitted = true;
        },
        error => {
          console.log(error);
        });
  }

  retrieveCategories() {
    this.categoryService.getAllCategories()
      .subscribe(
        data => {
          this.myCategories = data;
          console.log(data);
        },
        error => {
          console.log(error);
        });
  }


  newJob() {
    this.submitted = false;
    this.job = {
    category: '',
    endDated: '',
    email: '',
    published: false
  };
  
  }
}

W narzędziach developerkich w chrome w zakładce network wyświetla mi że się pobrała tablicca z kategoriami z mojego api ale nie wyświetla mi na stronie ich. Dopiero uczę się angulara i pewnie gdzieś zamotałe, :)

Tutaj masz najprostszy przykład selecta: https://stackblitz.com/edit/angular-9gejbd?embed=1&file=src/app/app.component.html
Powyrzucaj dla testu te swoje zbędne pola, które skopiowałeś z inputa. Nie jestem pewien, ale to może mieszać w działaniu, przez co coś się psuje. Dostajesz jakieś errory na console?

Z innych uwag:

 myCategories = this.retrieveCategories();

to co masz po prawej stronie jest zbędne, skoro w ngOnInit wywołujesz tę funkcję, a rezultat przypisujesz do myCategories.
Dodatkowo po to w Angularze masz TS aby używać typów. Zadeklaruj po ludzku to jako tablicę, nie wiem co tam chcesz, stringów czy własnych obiektów.

Dzięki wielkie działa z tego przykładu co podałeś:)