Отображение результатов не найдено, когда api возвращает пустой набор результатов в Angular? - PullRequest
Новая
       75

Отображение результатов не найдено, когда api возвращает пустой набор результатов в Angular?

0 голосов
/ 28 мая 2020

Я разработал API результатов поиска, который дает результаты в формате массива. Если результатов нет, это приводит к пустому арри.

Я использую Angular, чтобы показать результаты. Я хочу отображать результаты, когда длина массива больше нуля, и отображать сообщение «Результаты не найдены», когда длина массива равна нулю.

Но даже если есть совпадающие результаты для запроса, он всегда показывает длину массива как ноль, поэтому всегда показывает «результаты не найдены». Я думаю, это проблема асинхронного характера. Любая помощь приветствуется.

Html Код: 

          <div class="col-sm-12">
            <div *ngIf="carsAvailable; then showCars; else showError"></div>
            <ng-template #showCars>
              <div class="card mb-3" *ngFor="let car of cars">
                <div class="row no-gutters">
                  <div class="col m-3">
                    <div class="w-25 float-left mr-5">
                      <img src="{{car.image1}}" class="img-fluid rounded" alt="">
                    </div>
                    <div class="card-block px-2">
                      <h4 class="card-title">{{car.vehicletitle}}</h4>
                      <p class="card-text">{{car.vehicleoverview | slice:0:200}}</p>
                      <a href="#" class="btn btn-primary">Full Details</a>
                    </div>
                  </div>
                </div>
              </div>
            </ng-template>
            <ng-template #showError>
              <div> No cars found with your search criteria. Please change the search criteria.</div>
            </ng-template>
          </div>

код ts: 

import { Component, OnInit } from '@angular/core';
import { CarsdetailsService } from '../services/carsdetails.service';
import { ActivatedRoute } from '@angular/router';

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

  public cars:any = [];
  public carsAvailable: boolean = false;
  public cityid:string;
  public branchid:string;
  public brandid:string;
  public keywords:string;

  constructor(private _carsdetailsService:CarsdetailsService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParamMap.subscribe(queryParams => {
      this.cityid = queryParams.get("city");
      this.branchid = queryParams.get("branch");    
      this.brandid = queryParams.get("brand");    
      this.keywords = queryParams.get("keywords");   
    });
    this._carsdetailsService.getSearchedCars(this.cityid, this.branchid,this.brandid,this.keywords).subscribe(data => this.cars = data.carInfo.cars);
    if(this.cars.length>0){
      this.carsAvailable = true;
    }
    alert(this.carsAvailable);
  }

}

Заранее спасибо, Subbu.

1 Ответ

1 голос
/ 28 мая 2020

Вы правы, это похоже на асинхронную проблему. Вы начинаете свою подписку, но не ждете ответа, прежде чем проверять .cars.length.

Вам просто нужно переместить этот оператор if в подписку, чтобы он не срабатывал, прежде чем вы его получите results: 

this._carsdetailsService.getSearchedCars(this.cityid, this.branchid,this.brandid,this.keywords).subscribe(data => {
    if (data.carInfo.cars.length > 0) {
        this.cars = data.carInfo.cars;
        this.carsAvailable = true;
     }

});

Кроме того, было бы более эффективно просто установить оператор if для проверки длины this.cars вместо установки переменной this.carsAvailable : 

<div class="col-sm-12">
    <div *ngIf="this.cars.length > 0; else showError" class="col-sm-12">
          <div class="card mb-3" *ngFor="let car of cars">
            <div class="row no-gutters">
              <div class="col m-3">
                <div class="w-25 float-left mr-5">
                  <img src="{{car.image1}}" class="img-fluid rounded" alt="">
                </div>
                <div class="card-block px-2">
                  <h4 class="card-title">{{car.vehicletitle}}</h4>
                  <p class="card-text">{{car.vehicleoverview | slice:0:200}}</p>
                  <a href="#" class="btn btn-primary">Full Details</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <ng-template #showError>
          <div> No cars found with your search criteria. Please change the search criteria.</div>
        </ng-template>
      </div>
...