当api在Angular中返回空结果集时未显示任何结果？

Question

我开发了一个搜索结果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。

Answer 1

您是对的，它看起来像是一个异步问题。您开始订阅，但在检查the.cars.length之前不要等待答案。

您只需要在订阅中移动该if语句，以便在得到任何结果之前不会触发它：

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>