Angular, problem z ngIf i data binding

Cześć, uczę się Angulara i mam problem z wyświetlaniem danych. Mam główny app-component i 3 childy. Jest to aplikacja, która ma wyświetlać przez nas zadania, które sami dodajemy oraz listę zadań zrobionych.
Kod wygląda tak:

<ng-container *ngIf="listaZadan.lenght > 0; else noTask">
    <ul>
        <li *ngFor="let zadanie of listaZadan">
            {{zadanie}}
            <button (click)="usun(zadanie)">Usuń zadanie</button>
            <button (click)="zrobione(zadanie)">Zrobione</button>
        </li>
    </ul>
</ng-container>
<ng-template #noTask>
    <p>Nie masz zadań, masz teraz czas wolny!</p>
</ng-template>

Nie działa mi tutaj ngIf, tzn wyświetla mi komunikat z template ale po dodaniu zadania nie znika napis i nie pojawia się lista zadań. Nie wiem dlaczego.

Drugi problem mam z wyświetleniem ilości zadań zrobionych.

<h3>Zadania wykonane: {{ listaZrobionych.lenght}} </h3>
<ul>
    <li *ngFor="let zadanie of listaZrobionych">
        {{zadanie}}
    </li>
</ul>

Tutaj wyświetla mi się wszystko oprócz długości tej listy. W konsoli nie wywala mi błędów.
Co robię źle?

Hej.

Musisz zwracać większą uwagę na pisownię. W Twoich *ngIf zamiast length jest użyte lenght. W obu przypadkach zwracany jest undefined dlatego nie działa Ci to poprawnie.

FellFree napisał(a):

Hej.

Musisz zwracać większą uwagę na pisownię. W Twoich *ngIf zamiast length jest użyte lenght. W obu przypadkach zwracany jest undefined dlatego nie działa Ci to poprawnie.

Poprawiłem to i zaczął mi wyświetlać ilość po stronie zadań wykonanych ale dalej nie wyświetla mi listy zadań do zrobienia. Jak usunę mój ngIf to się pojawia więc gdzieś tutaj musi być błąd ale już nie wiem jaki.

Możesz udostępnić plik .ts dla tego komponentu?

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

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

  @Input()
  listaZadan = [];
  @Output()
  emitZrobione = new EventEmitter<String>();
  @Output()
  emitUsun = new EventEmitter<String>();
  constructor() { }

  ngOnInit() {
  }
  usun(zadanie: String) {
    this.emitUsun.emit(zadanie);
  }

  zrobione(zadanie: String) {
    this.emitZrobione.emit(zadanie);
  }
}

A tak wygląda plik ts dla aplikacji:

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'listazadan';

  listaZadan: Array<String> = [];
  listaZrobionych: Array<String> = [];


dodawanie(zadanie: String) {
  this.listaZadan.push(zadanie);
}

usun(zadanie: String) {
  this.listaZadan = this.listaZadan.filter(e => e !== zadanie);
}

zrobione(zadanie: String) {
  this.listaZrobionych.push(zadanie);
  this.usun(zadanie);
}
}

Uczyłeś się może jakiegoś języka z silnym typowaniem (Java albo coś z rodziny C)? W TS/JS nie ma typu String tylko jest string.

Jeżeli poprawiłeś w *ngIf w ng-container to musi działaś. Dla pewności odpaliłem to u siebie i działa. Chyba, że poprzez @Input nie dochodzi Ci nic innego jak pusta tablica. Wtedy nie będzie się pokazywało, bo nie będzie żadnych zadań.

Zaczynałem od Pythona, potem trochę Javy a teraz uczę się Angulara żeby potem przejść do Reacta najlepiej. Na początku pisałem string ale wtedy wywalało mi w konsoli undefined. Po zmianie litery na dużą problem znikną

W TS jest string. Jeżeli miałeś jakieś błędy, to znaczy, że coś jest nie tak i wymaga to poprawy - zmień na właściwy typ i popraw ;)

Oki, dzięki wielkie za pomoc.

A kod już działa ;) nie miałem zapisanego pliku. Głupi błąd nowicjusza