Question

如果我的英语不太了解，我深表歉意。我正在尝试通过HTTP带来一些数据，请求正在工作，但是我无法正确加载它们，我的鼻子告诉我这是一个无神经症问题，但是我来这里是为了寻求其他意见，以便进一步了解有经验的可以帮助我。我保留涉及的代码。组件及其各自的模板。我还将留下指向公共资源库的链接，以便他们可以查看最完整的代码。

[TEMPLATE resultado-busqueda]英语：搜索结果

<ngx-spinner></ngx-spinner>
<app-nav></app-nav>
<app-mapa [fullDataLocation]="requestData"></app-mapa>
<div class="container">
  <div class="row">
    <div class="col-2">
        <app-filtros (filterHandler)="loadData(0, $event)"></app-filtros>
    </div>
    <div  class="col-10">
        <app-result-area  [fullData]='requestData'></app-result-area>
        <app-paginator [Data]='requestData' (pagesHandler)="loadData($event,defaultFilters)"></app-paginator>
    </div>
  </div>
</div>
<app-footer></app-footer>

[组件]搜索结果

import { async } from '@angular/core/testing';
import { PropiedadesService } from "src/app/Services/propiedades-service.service";
import { Component, OnInit, Input } from "@angular/core";
import { Router, ActivatedRoute, ParamMap } from "@angular/router";
import { switchMap } from "rxjs/operators";
import { NgxSpinnerService } from 'ngx-spinner';

/* MODELS */
import { Filter } from "./../../Models/filter-model";
import { reject } from 'q';
import { promise } from 'protractor';


@Component({
  selector: "app-resultado-busqueda",
  templateUrl: "./resultado-busqueda.component.html",
  styleUrls: ["./resultado-busqueda.component.css"]
})
export class ResultadoBusquedaComponent implements OnInit {
  requestData: any;
  activatedPage: number = 0;
  defaultFilters: Filter[] = [];
  loadpage: number;


  constructor(
    private propiedadesService: PropiedadesService,
    private activeroute: ActivatedRoute,
    private spinner: NgxSpinnerService
  ) {
      this.activeroute.params.subscribe(p => {
      this.applyDefaultFilter( 1, p.purp, 0);
      this.applyDefaultFilter( 2, p.type, 1);
      this.applyDefaultFilter( 3, p.muni, 2);
      } );
      this.processData(0, this.defaultFilters);
   }
  ngOnInit() {
    /** spinner starts on init */
    this.spinner.show();
    this.processData(0, this.defaultFilters);
  }
loadData(page: number, filter?: Filter[]){

  this.propiedadesService
      .postSearchResult(
        page,
        filter[filter.length - 1].type === 1 ? filter[filter.length - 1].id : null,
        filter[filter.length - 1].type === 3 ? filter[filter.length - 1].id : null,
        filter[filter.length - 1].type === 2 ? filter[filter.length - 1].id : null,
        filter[filter.length - 1].type === 4 ? filter[filter.length - 1].id : null
      )
      .subscribe((res: any) => {
        const promise = new Promise((resolve, reject) => {
            console.log("REQUEST RESULT --->: ", res.Result);
            this.requestData = res.Result;
            resolve(this.requestData);
            if (!this.requestData) {
            reject(new Error('No existen datos'));
            }

        });
        console.log("LOAD DATA PROMISE ---> ", promise);
        return promise;
        });
  }

  async processData (page: number, filter?: Filter[]) {
    try {
      const result = await this.loadData(page, filter);
      console.log('PROCESS DATA RESULT --->',result);
      this.spinner.hide();
    } catch (err) {
      return console.log(err.message);
    }
  }

  applyDefaultFilter( filterType: number, filterId: number, idx: number ) {
      const OBJ: Filter = {
      name: null,
      id: filterId,
      type: filterType
    };
      this.defaultFilters.splice(this.defaultFilters.length, idx, OBJ);
  }
}

[模板结果区域]

<!-- RESULTS-->
<div class="result-area">
  <img
    class="icon"
    src="../../assets/Content/Images/no-result-icon.png"
    alt=""
  />
  <section>
    <h1 class="ng-binding">No existen resultados para los filtros escogidos</h1>
    <p class="ng-binding">
      Modifica tu elección de filtros para buscar entre <br />nuestras
      propiedades
    </p>
  </section>
</div>
<!-- !RESULTS -->
<div class="result-area">
  <div class="card-columns row" *ngIf="result">
    <span class="col-12">Total de propiedades: {{this.resultnum}}</span>
    <div  class="card col-3" *ngFor="let i of fullData.Properties" >
      <div>
          <img src="../../../../assets/Content/Images/default-img.png" class="card-img-top" alt="..." />
      </div>
      <div class="card-body">
        <h5 class="card-title">{{i.PropertyType}}</h5>
        <p class="card-text">
        <span>
          {{i.MunicipalityName + "," + i.NeighborhoodName}}
          <br><small class="text-muted">{{i.TotalArea}} m²</small>
        </span>
      </div>
    </div>
  </div>
</div>

[部分结果区域]

import { Component, OnInit, Input } from "@angular/core";
import { PropiedadesService } from "src/app/Services/propiedades-service.service";

@Component({
  selector: "app-result-area",
  templateUrl: "./result-area.component.html",
  styleUrls: ["./result-area.component.css"]
})
export class ResultAreaComponent implements OnInit {
  result = false;
  loading = true;

  resultnum = 0;
  @Input() fullData: any;
  filtrosActivos: any[] = [];
  constructor() {}

  ngOnInit() {
      this.loading = false;
      if (this.fullData.Count > 0) {
        this.result = true;
        this.resultnum = this.fullData.Count;
      }
 }
}

完整的存储库 git - CLICK ME

与结果

如您所见，结果将它们返回给我，但是没有正确地将它们加载到子组件中。非常感谢您，这是最好的开发人员社区。

我无法加载异步数据请求

0 个答案: