What is a promise in Javascript?

Question

tripossi

Asked: 2020-04-23 03:27:34 +0800 CST 2020-04-23 03:27:34 +0800 CST 2020-04-23 03:27:34 +0800 CST

Load result of a query in a table with angular

772

I am working on a screen that is made up of several components, one is the search filter and the other is a table that will show the result of a query to an oracle DB.

The table is always painted on the screen but when the result of the query is returned it must be updated and painted the results obtained and here I have the problem I am new to angular and I don't know how I can do that. I have searched the Internet but the solutions I have seen do not finish making them work.

filterSearch.component.ts

import { Component, OnInit, Output, EventEmitter } from "@angular/core";
import { BusquedaServiceService } from '../../../services/busquedaService/busqueda-service.service';
import { Busqueda } from 'src/app/model/busqueda';

@Component({
   selector: "app-buscador-principal",
   templateUrl: "./buscador-principal.component.html",
   styleUrls: ["./buscador-principal.component.css"]
})
export class BuscadorPrincipalComponent implements OnInit {

@Output() emitResultadoBusqueda: EventEmitter<Busqueda>;

constructor(private _busquedaServiceService: BusquedaServiceService) {
    this.emitResultadoBusqueda = new EventEmitter();
}

getValoresComponent() {

    this._busquedaServiceService.busqueda(JSON.stringify(this.busqueda)).subscribe(resp => {
        console.log(resp);
        this.emitResultadoBusqueda.emit(resp);
    });
}

The getValoresComponent() method is the one that sends the filters by which you want to search the oracle database (I have omitted all the code in that part).

this._busquedaServiceService.busqueda launches the service that queries in the BBDD and receives resp, which is the result of the BBDD.

ParentComponent.component.html

<div class="row" id="body-row">
<app-menuLateral></app-menuLateral>
<!-- MAIN -->
<div class="container col mt-3">
    <div class="container">
        <app-buscador-principal (emitResultadoBusqueda) = "resultadoBusqueda = $event"></app-buscador-principal>
        <div class="row">
            <div class="col-md-12 mb-5">
                <!-- Este es el div de contenido con scroll -->
                <h5 class="border-bottom border-success mt-3 mb-3">Resultados</h5>
                <app-tabla></app-tabla>
            </div>
        </div>
    </div>
</div>
<app-menuFAB></app-menuFAB>

In the parent I listen to the event emitted by the child

parentComponent.component.ts

import { Component, OnInit } from '@angular/core';
import { Busqueda } from 'src/app/model/busqueda';

@Component({
  selector: 'app-historico',
  templateUrl: './historico.component.html',
  styleUrls: ['./historico.component.css']
})
export class HistoricoComponent implements OnInit {

  resultadoBusqueda: Busqueda;

  constructor() { }

  ngOnInit() {}

}

In the table component right now I have data added manually but I want it to load the ones returned by the parent

table.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Busqueda } from 'src/app/model/busqueda';

@Component({
    selector: "app-tabla",
    templateUrl: "./tabla.component.html",
    styleUrls: ["./tabla.component.css"]
})
export class TablaComponent implements OnInit {

    @Input() ots: Busqueda;

    constructor() { }

    ngOnInit() {

    /*this.ots = [
        { numero: "000174585", tipo: "DPRP-DR1", estado: true, fecha: "10/03/2020" },
        { numero: "00025", tipo: "DPRP-DR3", estado: false, fecha: "09/03/2020" },
        { numero: "000254786", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254787", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254475", tipo: "DOPL-DO1", estado: false, fecha: "11/03/2020" },
        { numero: "000254788", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254789", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254790", tipo: "DPRN-DR3", estado: false, fecha: "09/03/2020" },
        { numero: "000254791", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254792", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254793", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254794", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254795", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254796", tipo: "DPRN-DR3", estado: false, fecha: "09/03/2020" },
        { numero: "000254797", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254798", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254799", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" },
        { numero: "000254800", tipo: "DPRN-DR3", estado: true, fecha: "09/03/2020" }
    ];*/
}
}

table.component.html

<p-table [columns]="cols" [value]="ots" dataKey="numero" [paginator]="true" [rows]="10">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngIf="collapsibles" style="width: 3em;" [attr.rowspan]="2" scope="row">
            <a href="importacion">
                <em class="fa fa-minus colorVerde"></em>
            </a>
        </th>
        <th *ngIf="checkboxes" style="width: 3em;" [attr.rowspan]="2" scope="row">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="checkboxGeneral">
                <label class="custom-control-label" for="checkboxGeneral"></label>
            </div>
        </th>
        <th *ngIf="colHistorio" style="width: 10em;" [attr.rowspan]="2" scope="row"></th>

        <th *ngFor="let col of columns" [pSortableColumn]="col.field" scope="row">
            {{col.header}}
            <p-sortIcon [field]="col.field"></p-sortIcon>
        </th>
    </tr>
    <tr>
        <th *ngFor="let col of columns" [ngSwitch]="col.field" scope="row">
            <input *ngSwitchCase="'numero'" class="form-control inputMini" type="text" placeholder="000000000">
            <select *ngSwitchCase="'tipo'" class="browser-default custom-select inputMini">
                <option>Seleccionar Tipo...</option>
                <option>DCO</option>
                <option>DOPL</option>
                <option>DPRN</option>
            </select>
            <select *ngSwitchCase="'estado'" class="browser-default custom-select inputMini">
                <option>Seleccionar Estado...</option>
                <option>OK</option>
                <option>KO</option>
            </select>
            <input *ngSwitchCase="'fecha'" class="form-control inputMini" type="date"/>
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
    <tr [ngClass]="rowData.estado ? null : 'ibg_red_error'">
        <td *ngIf="collapsibles">
            <a href="#" [pRowToggler]="rowData">
                <em [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'" class="colorVerde"></em>
            </a>
        </td>
        <td *ngIf="checkboxes">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" [id]="rowData.numero">
                <label class="custom-control-label" [for]="rowData.numero"></label>
            </div>
        </td>
        <td *ngIf="colHistorio" style="text-align: center;">
            <a class="mr-3 colorVerde" >
                <em class="fa fa-eye iconTabla"></em>
            </a>
            <a class="colorRojo">
                <em class="fa fa-trash iconTabla"></em>
            </a>
        </td>

        <td>
            {{rowData.numero}}
        </td>
        <td>
            {{rowData.tipo}}
        </td>
        <td *ngIf="rowData.estado; else estadoKO" class="ibd_green_success">
            OK
        </td>
        <ng-template #estadoKO>
            <td class="ibd_red_error">
                KO
            </td>
        </ng-template>
        <td>
            {{rowData.fecha}}
        </td>
    </tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData>
    <tr>
        <td [attr.colspan]="setAttrColspan()">
            <div class="ui-g ui-fluid" style="font-size:16px;">
                <div class="ui-g-12 ui-md">
                    <div class="ui-g">
                        <div class="list-group ui-g-12">
                            <div class="list-group-item flex-column align-items-start">
                                <div class="d-flex w-100 justify-content-between">
                                    <p class="mb-0">AUFNR - 00025</p>
                                    <small *ngIf="rowData.estado; else estadoKO" class="ibd_green_success">OK</small>
                                    <ng-template #estadoKO>
                                        <small #estadoKO class="ibd_red_error">KO</small>
                                    </ng-template>
                                </div>
                                <small>Longitud no válida.</small>
                            </div>
                            <div class="list-group-item flex-column align-items-start">
                                <div class="d-flex w-100 justify-content-between">
                                    <p class="mb-0">HOJARUTA - null</p>
                                    <small *ngIf="rowData.estado; else estadoKO" class="ibd_green_success">OK</small>
                                    <ng-template #estadoKO>
                                        <small #estadoKO class="ibd_red_error">KO</small>
                                    </ng-template>
                                </div>
                                <small>Atributo con valor null.</small>
                            </div>
                            <div class="list-group-item flex-column align-items-start">
                                <div class="d-flex w-100 justify-content-between">
                                    <p class="mb-0">FNO_UT - 23</p>
                                    <small *ngIf="rowData.estado; else estadoKO" class="ibd_green_success">OK</small>
                                    <ng-template #estadoKO>
                                        <small #estadoKO class="ibd_red_error">KO</small>
                                    </ng-template>
                                </div>
                                <small>Longitud no válida.</small>
                            </div>
                            <div class="list-group-item flex-column align-items-start">
                                <div class="d-flex w-100 justify-content-between">
                                    <p class="mb-0">FID_UT - null</p>
                                    <small *ngIf="rowData.estado; else estadoKO" class="ibd_green_success">OK</small>
                                    <ng-template #estadoKO>
                                        <small #estadoKO class="ibd_red_error">KO</small>
                                    </ng-template>
                                </div>
                                <small>Atributo con valor null.</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</ng-template>

When the table component is initialized it has no data and when it has data it is not painted. Any suggestion?

Thank you

1 Answers

Voted

hawks · Answer 1 · 2020-04-23T04:16:32+08:00

You have to pass the data to the component app-tablathat you receive from your backend. And from what I see your component app-tabladoes not have any @Inputthat is called colHistorioand this can cause errors.

Since you already have an @Inputen app-tablato pass the search data, then you add that and it should work if you have the correct template.

<div class="row" id="body-row">
<app-menuLateral></app-menuLateral>
<!-- MAIN -->
<div class="container col mt-3">
    <div class="container">
        <app-buscador-principal (emitResultadoBusqueda) = "resultadoBusqueda = $event"></app-buscador-principal>
        <div class="row">
            <div class="col-md-12 mb-5">
                <!-- Este es el div de contenido con scroll -->
                <h5 class="border-bottom border-success mt-3 mb-3">Resultados</h5>
                <app-tabla [ots]="resultadoBusqueda"></app-tabla>
            </div>
        </div>
    </div>
</div>
<app-menuFAB></app-menuFAB>

To see what data arrives at the input you can log with the method ngOnChanges(lifecycle method)

@Component({
    selector: "app-tabla",
    templateUrl: "./tabla.component.html",
    styleUrls: ["./tabla.component.css"]
})
export class TablaComponent implements OnInit {

    @Input() ots: Busqueda;

    constructor() { }

    ngOnInit() {
        // lo que tengas
    }

    ngOnChanges(changes: SimpleChanges) {
        console.log(changes);
    }
}

Load result of a query in a table with angular

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?