1

我正在制作一个 Angular 5 的网站。我在其中一个组件中使用输入绑定。

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

对于“recommendedHotels”，我从 HTTP 服务获取数据。从 mongo DB 我只获取三个记录。它是一个 JSON 对象。它应该看起来像 图1

'app-recommend-popular' 组件用于一个组件酒店。它在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');
    });
  }

谁能给我一个更好的方法？

4

1 回答 1

0

您正在推送现有阵列中的最新数据，每当您从后端获取更新数据时清除现有阵列。

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));
}
于 2018-04-05T05:38:52.800 回答