angular - Tabla de materiales de enlace a la tabla de nodos API

CorePress2024-01-24  6

Quiero conectar la fuente de datos de Rest API a la tabla de materiales. Esto funciona para una tabla simple, pero la tabla de materiales no muestra ningún dato.

Este es el marcado para una tabla simple que funciona bien:

<!-- simple table -->
<table border="1">
    <thead>
        <tr>
            <th>id</th>
            <th>description</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let x of list_product">
            <td>{{x.id}}</td>
            <td>{{x.description}}</td>
        </tr>
    </tbody>
</table>
<!-- end of simple table -->

Pero este marcado para una tabla de materiales no muestra los datos:

<!-- material table -->
<table mat-table>
    <!-- Position Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let x of list_product"> {{x.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let x of list_product"> {{x.description}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!-- end of material table -->

Este es mi código Typecript que llama a la tabla desde el nodo:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { analyzeAndValidateNgModules } from '@angular/compiler';

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

    public list_product:any=[];
    displayedColumns: string[] = ['id', 'description'];

    constructor(private http:HttpClient) { }

    ngOnInit(): void {
        this.get_data();
    }

    get_data()
    {
        this.http.get("http://localhost:3000/listp").subscribe(
            (res)=>{ 
                for(var i=0;i<res['length'];i++){
                    this.list_product.push(res[i]);
                }
            }//end res
        )
    }
}


------------------------------------

Su tabla simple y su tabla de materiales funcionan de manera diferente. Por lo tanto -

en su plantilla, debe vincular list_product a la propiedad dataSource de mat-table en el código de su componente, debe reemplazar list_product cada vez que reciba una nueva rrespuesta: completar list_product con elementos uno por uno no actualizará el origen de datos de la tabla.

Modifica tu tabla como -

<table mat-table [dataSource]="list_product">
    <!-- Position Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let product"> {{product.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let product"> {{product.description}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

y cambie el método get_data() a -

get_data(){
    this.http.get<any>("http://localhost:3000/listp").subscribe(
            res => this.list_product = res
        );
}

Para más detalles, consulta la documentación

15

@mahdi.gh Edite su publicación y agregue el código donde declaró y utilizó list_product.

-atiyar

27 de marzo de 2021 a las 6:36

definir antes de ngOnInit(): la clase de exportación BasicComponent implementa OnInit { public list_product:any=[]; columnas mostradas: cadena[] = ['id', 'descripción']; constructor(privado http:HttpClient) { }

- Mahdi.gh

27 de marzo de 2021 a las 6:51

@mahdi.gh Hay un enlace Editar debajo de tu publicación. Haz clic en él y obtendrás código adicional para la publicación, no aquí en los comentarios.

– atiyar

27 de marzo de 2021 a las 6:53

Creo que es importante que la tabla simple muestre mis datos, pero la tabla mat no los muestra, por eso mi archivo ts probablemente sea correcto y el problema está en el archivo html

- Mahdi.gh

27 de marzo de 2021 a las 6:57

@mahdi.gh Tu mesa simple y tu mesa con tapete funcionan de manera diferente. ¿Has revisado al ex?ejemplos en la documentación? Agregué el enlace en la respuesta.

-atiyar

27 de marzo de 2021 a las 7:05



------------------------------------

Quiero otra ayuda, y esta es la paginación de mi tabla, para diferentes mi proyecto con otra muestra en la web no puedo resolverlo

2

Esto no es una pregunta,esta es una respuesta que publicaste. Por favor, elimina esto. Le sugerí que publicara una nueva pregunta con detalles sobre su problema con el paginador. Hay un gran mensaje azul que dice "Hacer preguntas". botón en la parte superior derecha de la página. Usa eso.

-atiyar

28 de marzo de 2021 a las 6:19

cómo-paginar-una-tabla-de-datos-de-material-angular-que-se-vincula-a-un-enlace-api

- Mahdi.gh

28 de marzo de 2021 a las 6:42

Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare