Angular 6 Ожидание ответа службы перед отображением шаблона

Question

Я не могу решить эту проблему. Кто-нибудь знает, что здесь происходит?

Моя категория обслуживания

  getCategory(): Observable<Category[]> {
    // return this.http.get<Category[]>("/category");

    return this.http.get<Category[]>(this.endpoint)
  }

А вот и мой компонент редактирования категории

    import { Component, OnInit } from '@angular/core';
import { CategoryService, Category } from '../services/category.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-edit-category',
  templateUrl: './edit-category.component.html',
  styleUrls: ['./edit-category.component.scss']
})
export class EditCategoryComponent implements OnInit {

  constructor(private categoryService : CategoryService, private router: ActivatedRoute ) { }
  category : Category;

  ngOnInit() {
    this.router.params.subscribe(params => {
          this.categoryService.getCategory().subscribe((data : Category[]) => {

            this.category = data.filter(res => {
              return res.id == params["id"]
            })[0];
            console.log(this.category)

          });
   });

  }

}

Мне нужно вызвать категорию в моем файле edit-category-component.html.

<p>
  {{category.Adi}}
</p>

Я могу сделать это, но после этого или тем временем браузер говорит 4 раза (у меня 4 записи). Но мой код, показывающий после этого 4 ошибки записи. Код работает, так как эти ошибки сделаны.

ERROR TypeError: Cannot read property 'Adi' of undefined

Я новичок в угловой. Это выглядит как обещание или ngOnInit? И извините, я действительно не знаю Как я могу написать настоящий вопрос.

Answer 1

Вместо этого вы можете использовать нулевой безопасный оператор:

<p>
  {{category?.Adi}}
</p>

Это предотвратит ошибку, которую вы видите, когда категория пуста / не определена. Вы можете прочитать больше здесь: https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths