Znikanie opcji w select w Angularze

Witam!

Na poczatku powiem, ze ten problem mnie zaskoczyl: przy uzyciu ngFor w option w select poczatkowo opcje w szablonie wyswietlaja sie prawidlowo. Opcji jest zawsze duzo -wiecej niz kilka. Niestety po jakims czasie oprocz zaznaczonej opcji, menu rozwijane jest puste, mimo, ze nic przy nim nie robie. Kod wyglada tak:

szablon:

<select #litera1 name="znak1" class="form-control znak1" >
                <option *ngFor="let litera of zwrocLitera()" >
                  {{litera}}
                </option>

              </select>

              <select #litera2 name="znak2" class="form-control znak2">
                <option *ngFor="let litera of zwrocLitera()" >
                  {{litera}}
                </option>

              </select>

komponent:

constructor(private changeDetector: ChangeDetectorRef) {
   
 }

 ngAfterContentChecked() {

   setInterval((() => this.changeDetector.markForCheck()), 2000);
   
 } 

Prosze o rady co jest nie tak, ze opcje znikaja( wykrywanie zmian jest mi potrzebne w calym formularzu, detectChanges ani nic innego niz to co wyzej, do tej pory w tym projekcie mi nie zadzialalo).

To jest dopiero poczatek - nic tam jeszcze nie ma wiecej w komponencie. A metoda zwrocLitera wyglada tak:

zwrocLitera(): string[] {

   return this.litera;

 }

Gdzie litera to:

private litera: string[] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

I teraz widze, ze lepiej byloby nazwac this.litery zamiast this.litera oraz zwrocLitery zamiast zwrocLitera.

Moje podejrzenie jest takie, ze cos nie tak z wykrywaniem zmian. A wykrywanie bedzie mi jeszcze potrzebne przy nowym elemencie, ktorego jeszcze tu nie ma, od ktorego uzaleznione bedzie pojawianie sie innego elementu formularza przed zgloszeniem formularza.

Dodaj value w options, jeżeli to nie pomoże - wrzuć cały komponent (template i logikę) bo cudów nie ma i albo gdzieś modyfikujesz litery, możesz też w timeout debuga dac, żeby sprawdzić co siedzi w litery przed wywołaniem changedetectora.

@Aisekai: Przyznam sie, ze mnie troche Aisekai oswieciles. Rzeczywiscie jest troche wiecej znacznikow w szablonie, ale myslalem, ze to nieistotne i nie chcialem zaciemniac obrazu. Sadzilem, ze blad jest w select. Niestety blednie. Teraz jestem pewien, ze blad jest w innym miejscu.
Zwracam uwage zwlaszcza na fragment: *ngIf="this.sprawdzCzyKomputer(player1.value,player2.value)", ktory powoduje zanikanie opcji w select. A wiec w formularzu znajduje sie:

<form novalidate class="formularz">

            <div class="form-group">

              <input type="text" #player1 name="gracz1" class="form-control player1" size="15" maxlength="30" placeholder="Player1" />
              <input type="text" #player2 name="gracz2" class="form-control player2" size="15" maxlength="30" placeholder="Player2" />

            </div>
            <div class="form-group">

              <select #litera1 name="znak1" class="form-control znak1">
                <option *ngFor="let litera of zwrocLitery()">
                  {{litera}}
                </option>

              </select>

              <select #litera2 name="znak2" class="form-control znak2">
                <option *ngFor="let litera of zwrocLitery()">
                  {{litera}}
                </option>

              </select>

            </div>
            
  <div class="form-group" *ngIf="this.sprawdzCzyKomputer(player1.value,player2.value)">   //tutaj wystepuja problemy
    <label>computer level:</label>

    <select name="poziom" class="form-control poziom">
      <option *ngFor="let poz of zwrocPoziom()">
        {{poz}}
      </option>
    </select>


  </div>
  <div class="form-group">
    <input type="submit" value="Play" class="bg-primary text-white form-control graj" />
  </div>
    
          </form>

tresc watpliwej funkcji:

sprawdzCzyKomputer(player1: string, player2: string): boolean {

    let tresc: string = "Computer";

    if ((player1 == tresc || player2 == tresc) && player1 != player2) return true;
    else return false;

  }

przed wrzuceniem jej tu wyzej lekko ja przerobilem i obecnie przy pojawianiu sie namysla sie chwile puste menu rozwijane a po sekundzie-dwoch pojawia sie normalnie. Czy taki efekt jest do zaakceptowania? Bo ja nie wiem czemu taka prosta moim zdaniem funkcja moze byc problemem?

A sprobowalem tez zastapic te linie:

<div class="form-group" *ngIf="this.sprawdzCzyKomputer(player1.value,player2.value)">

linia:

<div class="form-group" *ngIf="ustawGraczy(player1,player2) && czyJedenKomputer()">

gdzie:

private gr1: string;
  private gr2: string;

ustawGraczy(player1, player2): boolean {

    this.gr1 = player1;
    this.gr2 = player2;

    return true;

  }

  zwrocGracz1(): string {

    return this.gr1;

  }

  zwrocGracz2(): string {

    return this.gr2;

  }

  czyJedenKomputer() {

    if ((this.zwrocGracz1() == 'Computer' || this.zwrocGracz2() == 'Computer') && this.zwrocGracz1() != this.zwrocGracz2()) return true;
    else return false;

  }

I efekt jest taki, ze dosc szybko sie pojawia menu rozwijane, ale czasem jednak trzeba poczekac kilka sekund. Takze efekt troche inny, ale tez nieidealny.
Powiem szczerze nie wiem czemu tak sie dzieje w obu przypadkach - czy to jest az tak obciazajace dla komputera?

Chcialem wykrywac wpisanie nazwy jednego z dwoch graczy "Computer", ale tylko jednego i wtedy wyswietlac wybor poziomu komputera. A to wszystko przed zgloszeniem formularza.
A teraz mysle, ze moze wywolywac drugi formularz z wyborem poziomu komputera, jesli trzeba i jesli pierwszy juz zgloszony i poprawny.