Я не могу загрузить асинхронный запрос данных - PullRequest
0 голосов
/ 23 февраля 2019

Я прошу прощения, если мой английский не совсем понятен.Я пытаюсь принести некоторые данные через HTTP, запросы работают, но я не могу заставить их загружаться правильно, мой нос говорит мне, что это проблема асинхронности, но я прихожу сюда, чтобы спросить другое мнение, чтобы увидеть, если кто-то ещеОпытный может помочь мне.Я оставляю код вовлеченным.И компонент, и его соответствующие шаблоны.Я также оставлю ссылку на общедоступный репозиторий, чтобы они могли видеть наиболее полный код.

[ШАБЛОН resultado-busqueda] english: search-result

<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>

[COMPONENT] ПОИСК-RESULT

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 - НАЖМИТЕ НА МНЕ

И РЕЗУЛЬТАТ enter image description here

Как вы можете видеть результаты, они возвращаются мне, но неправильно загружают их в дочерние компоненты.Заранее большое спасибо, это лучшее сообщество разработчиков.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...