堆棧內存溢出
  簡體   English   中英

將 Json 數據顯示到<mat-table>在 angular 組件中</mat-table>

[英]Show Json data into <Mat-Table> in angular component

 原文  2022-09-08 08:29:07  9   1    angular/ laravel/ api/ angular-material

問題描述

我正在使用 Laravel-api 從數據庫中獲取記錄。 我成功地將數據顯示到console.log()中。 但無法將其顯示給 Angular 材料的<mat-table>元素。

mat-table 內顯示了一些默認信息。 我想將其更改為動態用戶數據。

組件.ts

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';


export interface PeriodicElement {
  name: string;
  email: string;
  position: number;
}
const ELEMENT_DATA: PeriodicElement[] = [
  
  {position: 1, name: 'Hydrogen', email: '1.0079'},
  {position: 13, name: 'Aluminum', email: '26.9815'},
  {position: 14, name: 'Silicon', email: '28.0855'},
  {position: 15, name: 'Phosphorus', email: '30.9738'},
  {position: 16, name: 'Sulfur', email: '32.065'},
  {position: 17, name: 'Chlorine', email: '35.453'},
  {position: 18, name: 'Argon', email: '39.948'},
  {position: 19, name: 'Potassium', email: '39.0983'},
  {position: 20, name: 'Calcium', email: '40.078'},
];

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent implements OnInit, AfterViewInit {

  users:any;
  displayedColumns: string[] = ['position', 'name', 'email'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);


  constructor() { }

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

  getUsersData() {
    this.dataService.getData().subscribe(res => {
      this.users = res;
      console.log(res);
    });
  }

}

我的觀點

<table mat-table [dataSource]="dataSource">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

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

  <!-- Weight Column -->
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef> Email </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>


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

Dataservice.ts 文件

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http:HttpClient) { }

 

  getData() {
    return this.http.get(environment.apiUrl+'/users/');
  }

}

我在console.log(res)中獲得的數據。

0
: 
{id: 1, name: 'Marlen Green', email: 'everett.koch@example.net', created_at: '2022-09-07T07:09:55.000000Z', updated_at: '2022-09-07T07:09:55.000000Z'}
1
: 
{id: 2, name: 'Buck Gaylord I', email: 'ernesto.crona@example.net', created_at: '2022-09-07T07:09:55.000000Z', updated_at: '2022-09-07T07:09:55.000000Z'}
2
: 
{id: 3, name: 'Orlando Trantow', email: 'emerson09@example.com', created_at: '2022-09-07T07:09:55.000000Z', updated_at: '2022-09-07T07:09:55.000000Z'}
3
: 
{id: 4, name: 'Jewell Gibson', email: 'ekoelpin@example.com', created_at: '2022-09-07T07:09:55.000000Z', updated_at: '2022-09-07T07:09:55.000000Z'}
4
: 
{id: 5, name: 'Ramiro Schamberger', email: 'goconnell@example.net', created_at: '2022-09-07T07:09:55.000000Z', updated_at: '2022-09-07T07:09:55.000000Z'}
5
: 
{id: 6, name: 'Miss Maudie Steuber III', email: 'durgan.alford@example.org', created_at: '2022-09-07T07:09:56.000000Z', updated_at: '2022-09-07T07:09:56.000000Z'}
6
: 
{id: 7, name: 'Allen Bruen', email: 'lucious.hartmann@example.org', created_at: '2022-09-07T07:09:56.000000Z', updated_at: '2022-09-07T07:09:56.000000Z'}
7
: 
{id: 8, name: "Efren O'Kon", email: 'cedrick84@example.com', created_at: '2022-09-07T07:09:56.000000Z', updated_at: '2022-09-07T07:09:56.000000Z'}
8
: 
{id: 9, name: 'Mrs. Carolyn Lowe', email: 'johnston.alexis@example.org', created_at: '2022-09-07T07:09:56.000000Z', updated_at: '2022-09-07T07:09:56.000000Z'}
9
: 
{id: 25, name: 'Muhammad Shahzaib', email: 'media@akc.ae', created_at: '2022-09-08T05:46:19.000000Z', updated_at: '2022-09-08T05:46:19.000000Z'}
10
: 
{id: 26, name: 'Muhammad Shahzaib', email: 'shahzaib.chand58@gmail.com', created_at: '2022-09-08T05:52:50.000000Z', updated_at: '2022-09-08T05:52:50.000000Z'}
11
: 
{id: 27, name: 'Muhammad Shahzaib', email: 'm.shahzaib3242@gmail.com', created_at: '2022-09-08T05:53:50.000000Z', updated_at: '2022-09-08T05:53:50.000000Z'}

如何將 function getUsersdata()中的數據顯示到此表中。

1 個解決方案

解決方案1
 0 已采納  2022-09-08 08:45:53

請查看下面的示例，在調用 api 后，您可以使用與初始化相同的方式重新初始化。

ts

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { DataService } from './data.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular 5';
  displayedColumns = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<Element>([]);

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.getUsersData();
  }

  getUsersData() {
    this.dataService.getData().subscribe((res) => {
      this.dataSource = new MatTableDataSource<Element>(res);
    });
  }
}

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

html

<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">
    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.id }} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.name }} </mat-cell>
    </ng-container>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.email }} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Created At </mat-header-cell>
      <mat-cell *matCellDef="let element">
        {{ element.created_at | date }}
      </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Updated At </mat-header-cell>
      <mat-cell *matCellDef="let element">
        {{ element.updated_at | date }}
      </mat-cell>
    </ng-container>

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

數據服務.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { of } from 'rxjs/observable/of';
import { delay } from 'rxjs/operators';

@Injectable()
export class DataService {
  data = [
    {
      id: 1,
      name: 'Marlen Green',
      email: 'everett.koch@example.net',
      created_at: '2022-09-07T07:09:55.000000Z',
      updated_at: '2022-09-07T07:09:55.000000Z',
    },
    {
      id: 2,
      name: 'Buck Gaylord I',
      email: 'ernesto.crona@example.net',
      created_at: '2022-09-07T07:09:55.000000Z',
      updated_at: '2022-09-07T07:09:55.000000Z',
    },
    {
      id: 3,
      name: 'Orlando Trantow',
      email: 'emerson09@example.com',
      created_at: '2022-09-07T07:09:55.000000Z',
      updated_at: '2022-09-07T07:09:55.000000Z',
    },
    {
      id: 4,
      name: 'Jewell Gibson',
      email: 'ekoelpin@example.com',
      created_at: '2022-09-07T07:09:55.000000Z',
      updated_at: '2022-09-07T07:09:55.000000Z',
    },
    {
      id: 5,
      name: 'Ramiro Schamberger',
      email: 'goconnell@example.net',
      created_at: '2022-09-07T07:09:55.000000Z',
      updated_at: '2022-09-07T07:09:55.000000Z',
    },
    {
      id: 6,
      name: 'Miss Maudie Steuber III',
      email: 'durgan.alford@example.org',
      created_at: '2022-09-07T07:09:56.000000Z',
      updated_at: '2022-09-07T07:09:56.000000Z',
    },
    {
      id: 7,
      name: 'Allen Bruen',
      email: 'lucious.hartmann@example.org',
      created_at: '2022-09-07T07:09:56.000000Z',
      updated_at: '2022-09-07T07:09:56.000000Z',
    },
    {
      id: 8,
      name: "Efren O'Kon",
      email: 'cedrick84@example.com',
      created_at: '2022-09-07T07:09:56.000000Z',
      updated_at: '2022-09-07T07:09:56.000000Z',
    },
    {
      id: 9,
      name: 'Mrs. Carolyn Lowe',
      email: 'johnston.alexis@example.org',
      created_at: '2022-09-07T07:09:56.000000Z',
      updated_at: '2022-09-07T07:09:56.000000Z',
    },
    {
      id: 25,
      name: 'Muhammad Shahzaib',
      email: 'media@akc.ae',
      created_at: '2022-09-08T05:46:19.000000Z',
      updated_at: '2022-09-08T05:46:19.000000Z',
    },
    {
      id: 26,
      name: 'Muhammad Shahzaib',
      email: 'shahzaib.chand58@gmail.com',
      created_at: '2022-09-08T05:52:50.000000Z',
      updated_at: '2022-09-08T05:52:50.000000Z',
    },
    {
      id: 27,
      name: 'Muhammad Shahzaib',
      email: 'm.shahzaib3242@gmail.com',
      created_at: '2022-09-08T05:53:50.000000Z',
      updated_at: '2022-09-08T05:53:50.000000Z',
    },
  ];

  constructor() {}

  getData(): Observable<any> {
    // used to simulate an API call
    return of(this.data).pipe(delay(2000));
  }
}

分叉的堆棧閃電戰

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 角從Service.component獲取數據到mat-table 在 Mat-Table (Angular) 中顯示分頁數據 Angular 材質 Mat-table 未渲染數據 Angular - 墊表渲染數據 Angular Material - 排序mat-table的數據 Mat-table在Angular 5中不打印數據 以mat-table角度2顯示數據 如何在Angular 5 mat-table中拼接數據？ mat-table 渲染但沒有數據顯示 - Angular Angular墊台
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM