api returns Angular 中的空结果集时显示未找到任何结果？

Question

我开发了一个搜索结果 api，它以数组格式给出结果。当没有匹配结果时，它会导致空数组。

我正在使用 Angular 来显示结果。我想在数组长度大于零时显示结果，在数组长度为零时显示消息"No results found"。

但是即使有匹配的查询结果，它总是显示数组的长度为零，所以它总是显示 "no results found"。我认为这是异步性质的问题。感谢任何帮助。

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);
  }

}

提前致谢，子部

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>

api returns Angular 中的空结果集时显示未找到任何结果？

Displaying no results found when the api returns an empty result set in Angular?

angular-services

angular