Ребенок с входной привязкой угловой 5 звонит несколько раз

Question

Я делаю веб-сайт на угловом уровне 5. Я использую привязку ввода в одном из компонентов.

<app-recommend-popular [comp]="component" [recommended]="recommendedHotels" [popular]="popularHotels"></app-recommend-popular>

Для "рекомендованных отелей" я получаю данные из службы HTTP. Из БД mongo я получаю только три записи. Это объект JSON. И должно появиться как на рисунке 1

Компонент "app-рекомендуемый-популярный" использует в компоненте Hotels.An вызывает сервисную функцию в конструкторе Hotel(для получения данных).
В первый раз, когда вызывается компонент, все прошло нормально. Но когда я возвращаюсь к тому же компоненту, это удваивает вещи. Как на рисунке 2

@Component({
 selector: 'app-recommend-popular',
  templateUrl: './recommend-popular.component.html',
  styleUrls: ['./recommend-popular.component.css']
})
export class RecommendPopularComponent implements OnInit{
  @Input() comp: string;
  @Input() recommended: string;
  @Input() popular: string;
  public recommendedThings: string[];
  constructor() {
  }
  getRepeater(ratingTotal) {
    return new Array(ratingTotal);
  }

  ngOnInit() {
  }
}

HTML-код здесь:

  <div class="card-deck">
    <div class="card" *ngFor="let r of recommended">
      <img class="card-img-top" src="{{ r.Image }}" alt="Card image cap">
      <div class="cardbody">
        <div class="row">
          <div class="col-sm-6 col-xs-6">
            <h5 class="card-title">{{ r.Name }}</h5>
          </div>
          <div class="col-sm-6 col-xs-6 alignRight">
            <p style="float: right">PKR {{ r.Price }}</p>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 col-xs-6">
            <div>
              <span *ngFor="let str of getRepeater(r.Rating)" class="fa fa-star" aria-hidden="true"></span>
            </div>
            <div>
              {{ r.Rating }}/5 (120 reviews)
            </div>
          </div>
          <div class="col-sm-6 col-xs-6 alignRight">
            <a class="btn btn-success" routerLink="/review">View Deal</a>
          </div>
        </div>
      </div>
    </div>
  </div>

Вот код сервиса:

  GetRecommendedHotels(latitude, longitude) {
    return this.http.get('http://localhost:3000/app/hotels/Lahore/5')
      .map((response: Response) => {
        const gethotels = response.json().obj;
        console.log(gethotels);

        for (const hotel of gethotels) {
          this.transformedhotels.push(new Hotel(hotel.Name, hotel.Location, hotel.Price, hotel.Rating,  hotel.TotalRooms, hotel.FreeRooms, hotel.Image));
        }
        this.hotels = this.transformedhotels;
        return this.transformedhotels;
      })
      .catch((error: Response) => Observable.throw(error));
  }

Извлечение кода (в конструкторе компонента "Отель")

  constructor(private hotelService: HotelService) {

    this.hotelService.GetRecommendedHotels(this.latitude, this.longitude).subscribe((hotels: Hotel[]) => {
      this.recommendedHotels = hotels;
      console.log('calling1');
    });
  }

Кто-нибудь может предложить мне лучший способ?

Answer 1

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

GetRecommendedHotels(latitude, longitude) {
    return this.http.get('http://localhost:3000/app/hotels/Lahore/5')
      .map((response: Response) => {
        const gethotels = response.json().obj;
        this.transformedhotels = []; <==============================
        console.log(gethotels);

        for (const hotel of gethotels) {
          this.transformedhotels.push(new Hotel(hotel.Name, hotel.Location, hotel.Price, hotel.Rating,  hotel.TotalRooms, hotel.FreeRooms, hotel.Image));
        }
        this.hotels = this.transformedhotels;
        return this.transformedhotels;
      })
      .catch((error: Response) => Observable.throw(error));
}