Невозможно увидеть значение @Input в консоли, но доступно в HTML

Question

В моем проекте Angular 4 я передаю родительский компонент значения формы, который поступает в результате вызова службы. Дочерний компонент получает это значение и также доступен в моем HTML. Но когда я утешаю это переданное значение в моем машинном файле дочернего компонента, оно показывает неопределенное.

Вот мои фрагменты кода шаг за шагом: -

restaurantlayout.component.ts (файл родительского компонента ts):

import { Component, OnInit, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RestaurantService } from '../../services/restaurant.service';
import { Response } from '@angular/http';

@Component({
  selector: 'app-restaurantlayout',
  templateUrl: './restaurantlayout.component.html',
  styleUrls: ['./restaurantlayout.component.css'],
  providers: [RestaurantService]
})

export class RestaurantlayoutComponent implements OnInit {

    public menuarray;
    public bannerarray;
    public popularArray; //passing data
    constructor(private restaurantservice:RestaurantService) { }

    ngOnInit() {
        this.restaurantservice.getPartcularRestaurantDetailsByidOrSlug()
            .subscribe((data:Response)=>{
                this.menuarray = data.json().menu['menu'] ;
                this.bannerarray = data.json().basicDetails['basicDetails'];
                this.popularArray = data.json().popular['popular'];
            }
        );
    }

}

restaurantlayout.component.html (родительский HTML-файл Alyout)

    <section class="restaurant-details-main">
    <app-restaurantbanner [bannerSection]="bannerarray"></app-restaurantbanner>

</section>
<section class="restaurant-mid-body">
    <div class="wraper">
        <div class="row">
            <app-restaurantmenu [menuSection]="menuarray"></app-restaurantmenu>
            <app-restaurantrecomend [popularSection]="popularArray">

            </app-restaurantrecomend> <!-- passed here  -->
            <app-restaurantbasket>

            </app-restaurantbasket>
        </div>
    </div>
</section>

Код файла машинописного текста дочернего компонента: -

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

import { NgModule } from '@angular/core';

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

    @Input() popularSection:string[];

    public decrementDisabled = true;

  constructor() { }

  ngOnInit() {
    console.log(this.popularSection); //giving undefined but available 
                                      //in HTML file      

}

  increment(popular){
    this.decrementDisabled = false;
    popular.count++;
  }

  decrement(popular){
    popular.count--;
  }

  addTobasket(popularitem){
    popularitem.cost = (popularitem.count*popularitem.item_price);
    this.data.changeBasketState(popularitem);
  }

}

Answer 1

Значение свойства input задается родительским объектом в асинхронной операции.

Вы можете использовать установщик в дочернем компоненте, чтобы получить значение в файле ts. Установщик для ввода выполняется каждый раз, когда обнаруживается изменение в свойстве ввода.

Answer 2

Ваш родительский компонент получает popularArray с помощью асинхронной операции, которая затем передается дочернему элементу как popularSection. Это означает, что когда дочерний компонент запускает свой метод ngOnInit, вызов службы еще не завершен, а popularSection по-прежнему не определен.

Измените ngOnInit на ngOnChanges, и вы увидите, что переменная сначала не определена, и как только служба вернет ее, дочерний элемент запишет правильное значение.