Зачем мне нужен оператор Safe Navigation (Elvis), если я инициализирую объект в Angular

Question

Angular 8, Django 3. Я отображаю объект Restaurant в виде RestaurantView. RestaurantView получает Restaurant для ngOnInit метода:

    restaurant: Restaurant
    id: string 

    getrestaurantdetail(id):void {
      this.restaurantservice.restaurantdetail(id).subscribe(restaurant => this.restaurant = restaurant)
    }


  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id')
    this.getrestaurantdetail(this.id)
  }

}

и затем отображается в файле html <h1>{{restaurant.name}}</h1>. Если я не помещаю оператора Элвиса в файл html как <h1>{{restaurant?.name}}</h1>, представление отображается правильно, но я получаю консольную ошибку property "name" not defined. Я не понимаю, если RestaurantView возвращает объект Restaurant при инициализации, почему я мог бы получить эту нулевую ошибку.

Answer 1

Это потому, что запрос, который возвращает restaurant, является асинхронным. Следовательно, restaurant будет неопределенным при первом отображении компонента, пока не будет возвращено наблюдаемое из метода restaurantdetail.

Оператор elvis, также известный как оператор безопасной навигации,

защищает от нулевых и неопределенных значений в путях свойств. Здесь он защищает от ошибки визуализации представления, если элемент имеет значение null.

Следовательно, это требуется для вашего HTML шаблона:

<h1>{{restaurant?.name}}</h1>

Альтернативой этому будет использовать структурную директиву ngIf , которая проверяет, является ли restaurant нулевым или неопределенным.

<h1 *ngIf="restaurant">{{restaurant.name}}</h1>