Я прошу прощения, если мой английский не совсем понятен.Я пытаюсь принести некоторые данные через 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 - НАЖМИТЕ НА МНЕ
И РЕЗУЛЬТАТ
Как вы можете видеть результаты, они возвращаются мне, но неправильно загружают их в дочерние компоненты.Заранее большое спасибо, это лучшее сообщество разработчиков.