[object, object] jak wyciągnąć dane?

Question

Dostaje takie dane :
 

  public ngOnChanges() {
    console.log('dish view', this.dish);
  }

które sobie kosoluję i wiem, że zawierają:

I w pliku html próbuję wyświetlić dane:
{{dish}} 

i wyświetla mi: 
[object, object].

Jak się dostać do środka, skoro {{dish.selectedDish}} generuje również błąd?

Comments

Czy to angular?

---

Tak!

Answer 1

Rozumiem, że chodzi o widok Angular? Jeśli tak to:

{{dish.selectedDish}}
albo
{{dish?.selectedDish}}
albo
{{dish['selectedDish']}}

A jaki błąd generuje ci {{dish.selectedDish}}? Być może nie masz jeszcze dostępnego obiektu dish i jest on undefined, musiałbyś to dokładnie przebadać.

Comments

ewentualnie możesz w ogóle np uzależnić stworzenie fragmentu html od istnienia obiektu, czy jego właściwości, np.:

<ng-container *ngIf="dish && dish.selectedDish">
  <!-- Twoje elementy, w których użyjesz np. {{dish.selectedDish}} -->
</ng-container>

Tylko w tym rozwiązaniu musisz uważać co jest w dish.selectedDish, bo jeśli to number i może być zerem to da false, więc musisz inny warunek, np. typeof dish.selectedDish === 'number'.

---

Nie znam angulara, ale czy to nie jest tak, że on interpoluje tylko stringi?

---

{{dish}} generuje [object, object]

{{dish.selectedDish}} generuje:

{{dish?selectedDish}} generuje również [object, object]
{{dish['selectedDish']}} generuje to samo co {{dish.selectedDish}}

W ts. konsoluje sobie to co dostaje w this.dish, i to ma dane cały czas.

Kończą mi się pomysły :(

---

Wygląda, jakby na starcie (czyli w momencie próby wyświetlenia) sam dish jeszcze nie istniał. Sugeruje to również mała ikonka "i" w konsoli.

---

@argeento ,

Nie znam angulara, ale czy to nie jest tak, że on interpoluje tylko stringi?

Przewali to na stringa, stąd właśnie [object, object]  ale pytanie zasadnicze, gdzie jest "napełniany" danymi obiekt dish?

Stosujesz metodę ngOnChanges, która wywoła się jako pierwsza po kosntruktorze i co wazniejsze, nie odpali się przy mutowaniu obiektów. Nie jest czasem tak, że startowo ustawiasz dish np. jako pusty obiekt {}, a uzupełniasz go jakoś asynchronicznie w ngOnInit itp.?

---

Pykło!
 

<div *ngIf="dish && dish.selectedDish">
  Gdy jest dish {{dish.selectedDish.name}}
</div>

 

Myślałam, że błędnie wyciągam dane, a tu taki psikus.
Dziękuję!