• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dlaczego *ngIf blokuje działanie przycisku toggle? Angular

VPS Starter Arubacloud
0 głosów
199 wizyt
pytanie zadane 15 stycznia 2021 w JavaScript przez HowToIT Początkujący (290 p.)

Przy pisaniu strony w Angularze natknęłam się na problem przy tworzeniu toggle menu. Normalnie działą, ale kiedy dodam div z *ngIf tak aby pojawiały mi się dwie wersje menu w zależności od wybranej (tryb jasny/ciemny) funkcja chowania przestaje działać. Kolory się zmieniają, ale menu jest statyczne. Z czego to może wynikać?

To jest jedna wersja mojego navbaru, pod spodem w componencie mam drugą, analogiczną.

  <div *ngIf="lightMode">
<div class="d-flex" id="wrapper">
    <!-- Sidebar -->
    <div class="bg-light border-right " id="sidebar-wrapper">
      <button class="list-group-item list-group-item-action bg-light font-weight-bold" (click)="showMain()">Daniel Klarenbum</button>
      <div class="list-group list-group-flush">
        <button class="list-group-item list-group-item-action bg-light" (click)="showSchedule()">Wyświetl plan</button>
        <button class="list-group-item list-group-item-action bg-light" (click)="showChoices()">Wybór przedmiotów</button>

    
        <div class="btn-group dropright">
          <button type="button" class="list-group-item list-group-item-action btn dropdown-toggle bg-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Giełda zamian
          </button>
          <div class="dropdown-menu">
            <button class="list-group-item list-group-item-action bg-light" (click)="makeNewExchange()">Złóż podanie</button>
            <button class="list-group-item list-group-item-action bg-light" (click)="editExchanges()">Edytuj/usuń podanie</button>
          </div>
        </div>

        <div class="btn-group dropright">
          <button type="button" class="list-group-item list-group-item-action btn dropdown-toggle bg-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Motyw
          </button>
          <div class="dropdown-menu">
            <button (click) = "toLightMode()" class="list-group-item list-group-item-action bg-light" >Dzienny</button>
            <button (click) = "toDarkMode()"class="list-group-item list-group-item-action bg-light">Nocny</button>
          </div>
        </div>

        <div class="btn-group dropright">
          <button type="button" class="btn dropdown-toggle list-group-item list-group-item-action bg-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Konto
          </button>
          <div class="dropdown-menu">
            <button class="list-group-item list-group-item-action bg-light" (click)="changePassword()">Zmień hasło</button>
            <a routerLink="/" (click) = "logout()" class="list-group-item list-group-item-action bg-light">Wyloguj się</a>
          </div>
        </div>

      </div>
    </div>
    <!-- /#sidebar-wrapper -->
    <!-- Page Content -->
    <div id="page-content-wrapper">
      <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
        <button class="btn btn-danger" id="menu-toggle">Menu</button>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-nav ml-auto mt-2 mt-lg-0">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
            <label class="form-check-label" for="inlineCheckbox1">Informatyka</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
            <label class="form-check-label" for="inlineCheckbox2">Dziennikarstwo</label>
          </div>
      </div>
      </nav>
      <div class="container-fluid" *ngIf="MainDisplay" >
        <h1 class="mt-4">SignMeUp</h1>
        <p>Celem projektu jest implementacja <code>SignMeUp</code> - platformy internetowej służacej do tworzenia 
        spersonalizowanego planu zajęć według szablonu stworzonego przez dziekanat. 
        Użytkownicy mają możliwość przypisania punktowego priorytetu do określonych zajęć, 
        a algorytm przydziela jak najkorzystniejeszy plan dla wszystkich studentów. 
        Dodatkowo istnieje możliwość zamiany już przypisanych zajęć poprzez giełd̨e zamian.
        </p>
      </div>
  </div>

A to funkcja ngOnInit w component.ts

ngOnInit(): void {
//Toggle Click Function
$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});
}

Co powinnam zmienić? Czy są jakieś inne sposoby na zamianę divów? Próbowałam skorzytsać z ng-hide, ale zdają się nie wpływać na stronę. Menu jak było ruchome tak jest, ale tryby koloru się nie zmieniają.

1
komentarz 15 stycznia 2021 przez Tomek Sochacki Ekspert (227,510 p.)
A dlaczego mając angulara ręcznie szukasz elementow dom j je modyfikujesz?
komentarz 15 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Dlaczego *ngIf blokuje działanie przycisku toggle? 

Czy możesz sprecyzować, którego konkretnie przycisku? I w jakim sensie blokuje - nie można go kliknąć (dostaje atrybut disabled)? Czy klikać można, ale nic się nie dzieje? Jest wyszarzony?

funkcja chowania przestaje działać. Kolory się zmieniają, ale menu jest statyczne.

Znowu - sprecyzuj proszę co działa, a co nie i o które konkretnie elementy chodzi. W templatce jest sporo użytych bindingów (click), a podany kod komponentu dotyczy tylko metody ngOnInit, która do obsługi kliku korzysta z jQuery.

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

Nie operuj bezpośrednio na DOM w Angularze (i ogólnie w podobnych frameworkach/bibliotekach) - do tego służą dyrektywy lub odpowiednie klasy - i nie mieszaj do tego innych bibliotek (w tym przypadku jQuery).

Próbowałam skorzytsać z ng-hide, ale zdają się nie wpływać na stronę

Z tego co pamiętam, Angular nie oferuje dyrektywy ng-hide (można ją zastąpić bindując atrybut hidden) - posiada ją natomiast AngularJS → https://docs.angularjs.org/api/ng/directive/ngHide

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

+2 głosów
1 odpowiedź 380 wizyt
pytanie zadane 5 maja 2023 w JavaScript przez mm Użytkownik (890 p.)
+2 głosów
1 odpowiedź 226 wizyt
pytanie zadane 2 maja 2023 w JavaScript przez mm Użytkownik (890 p.)
0 głosów
0 odpowiedzi 99 wizyt
pytanie zadane 24 kwietnia 2023 w JavaScript przez TheDarkSide Użytkownik (930 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...