时间戳

首页 > 解决方案 > 为什么我的数据没有填充到 Angular 材料表中

angular - 为什么我的数据没有填充到 Angular 材料表中

问题描述

我正在尝试从我的服务器获取数据以填充 Angular Material 数据表，但没有显示任何内容。我不确定我的 dataSource 是否不正确，或者我是否做错了什么。

我按照文档中的示例确保我做得正确并且到目前为止一切都很好。接下来，我尝试从 api 获取数据并能够完成该任务。现在我正试图从我的本地服务器获取数据，但没有显示任何内容。我错过了什么/做错了什么

export interface Task {
    title: string;
    note:string;
}

服务

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Observable } from 'rxjs';
import { Task } from './task.model'

@Injectable({
  providedIn: 'root'
})
export class HttpService {
  private serviceUrl = "http://localhost:8000/tasks"
  // private serviceUrl = "https://jsonplaceholder.typicode.com/users"
  constructor(private _http:HttpClient) { }

  getTasks():Observable<Task[]> {
    return this._http.get<Task[]>(this.serviceUrl);
  }

零件

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpService } from './../../http.service';
import { Observable } from 'rxjs';
import { DataSource } from '@angular/cdk/collections';
import { MatTableDataSource, MatPaginator, MatSort, MatSortable, MatTable } from '@angular/material';
import { Task } from './../../task.model';


@Component({
  selector: 'trial',
  templateUrl: './trial.component.html',
  styleUrls: ['./trial.component.scss']
})
export class TrialComponent implements OnInit {
  dataSource = new MatTableDataSource<Task>();
  displayedColumns = ['title', 'note'];

  constructor(private _httpService:HttpService) { }

  ngOnInit() {
    this.getTask();
  }

  getTask(){
    this._httpService.getTasks().subscribe(data => {
      if(!data){
        return;
      }
      this.dataSource = new MatTableDataSource(data)
      console.log(this.dataSource)
    })
  }
}

我也试过这个方法。也许有人可以让我知道哪个是正确或更好的方法

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpService } from './../../http.service';
import { Observable } from 'rxjs';
import { DataSource } from '@angular/cdk/collections';
import { MatTableDataSource, MatPaginator, MatSort, MatSortable, MatTable } from '@angular/material';
import { Task } from './../../task.model';


@Component({
  selector: 'trial',
  templateUrl: './trial.component.html',
  styleUrls: ['./trial.component.scss']
})
export class TrialComponent implements OnInit {
  displayedColumns = ['title', 'note'];
  dataSource = new TasksDataSource(this._httpService);

  constructor(private _httpService:HttpService) { }

  ngOnInit() {
  }

}

export class TasksDataSource extends DataSource<any>{
  constructor(private _httpService:HttpService) {
    super();
  }

  connect():Observable<Task[]> {
    return this._httpService.getTasks();
  }

  disconnect(){}
}

HTML

  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> 

    <ng-container matColumnDef="title"> 
      <th mat-header-cell *matHeaderCellDef> Title </th> 
      <td mat-cell *matCellDef="let task"> {{task.title}} </td>
    </ng-container>
    <ng-container matColumnDef="note"> 
      <th mat-header-cell *matHeaderCellDef> Note </th> 
      <td mat-cell *matCellDef="let task"> {{task.note}} </td>
    </ng-container>

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

  </table>

我的控制台没有显示任何错误。希望有人可以提供帮助，因为我已经尝试解决这个问题一段时间了，而且越来越令人沮丧，你们知道那是什么感觉

标签： angularangular-material

解决方案

试试这个：

this.dataSource.data = data;

推荐阅读