Znikanie opcji w select w Angularze

Znikanie opcji w select w Angularze
Ktos1
K1
Ktos1
K1
  • Rejestracja:około 5 lat
  • Ostatnio:16 dni
  • Postów:46
0

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:

Kopiuj
<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:

Kopiuj
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).

edytowany 1x, ostatnio: Ktos1
AI
Pokaż zwrocLitera motede i ogólnie cały komponent.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Ktos1
K1
Ktos1
K1
  • Rejestracja:około 5 lat
  • Ostatnio:16 dni
  • Postów:46
0

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

Kopiuj
zwrocLitera(): string[] {

   return this.litera;

 }

Gdzie litera to:

Kopiuj
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.

edytowany 1x, ostatnio: Ktos1
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Aisekai
AI
Aisekai
AI
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 3 lata
  • Postów:375
0

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.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Ktos1
K1
Ktos1
K1
  • Rejestracja:około 5 lat
  • Ostatnio:16 dni
  • Postów:46
0

@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:

Kopiuj
<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:

Kopiuj
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:

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

linia:

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

gdzie:

Kopiuj
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.

K1
Wstawilem tez wartosci value, nie wiem czemu od razu o tym nie pamietalem. Ciezko stwierdzic, czy to cos pomoglo, ale na pewno nie pogorszylo. A zawartosc this.litery nie zmienia sie, obojetnie, czy menu rozwijane sie 'zawiesza' czy pokazuje sie od razu.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Treść
Podgląd
Kliknij, aby dodać treść...
Kliknij, aby dodać załącznik lub wklej ze schowka.
Instrukcja obsługi Markdown
Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)