Javascript 如何使用angular5 material2从api填充数据？

下面我添加了我的“table.component.html”和“table.component.ts”。 我正在从API获取数据。我想在数据表中填充此数据

下面我添加了我的对象，这是我从API接收到的）

现在我硬编码了上面的对象，但我想从API填充数据

import {MediaMatcher} from '@angular/cdk/layout';
import { Component, OnInit, ViewEncapsulation,ViewChild,ChangeDetectorRef,Inject} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import {MatPaginator, MatSort, MatTableDataSource,MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

@Component({

  selector: 'app-table',

  templateUrl: './table.component.html',

  styleUrls: ['./table.component.css']

})



export class TableComponent {

  displayedColumns = ['position', 'name', 'weight', 'symbol'];

  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

   items: any;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  constructor(private router: Router, private route: ActivatedRoute, private http: HttpClient,public dialog: MatDialog) { }
  ngOnInit() {

    this.http.get('/item').subscribe(data => {

      console.log("data>>>>>",data);

      this.items = data;

    });

  }

  ngAfterViewInit() {

    this.dataSource.paginator = this.paginator;

  }

}



export interface Element {

  name: string;

  position: number;

  weight: number;

  symbol: string;

}



const ELEMENT_DATA: Element[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
];

从'@angular/cdk/layout'导入{MediaMatcher}；
从“@angular/core”导入{Component，OnInit，viewenclosuration，ViewChild，ChangeDetectorRef，Inject}；
从'@angular/common/http'导入{HttpClient}；
从'@angular/Router'导入{ActivatedRoute，Router}；
从“@angular/material”导入{MatPaginator、MatSort、MatTableDataSource、MatDialog、MatDialogRef、MAT_DIALOG_DATA}；
@组成部分({
选择器：“应用程序表”，
templateUrl:'./table.component.html'，
样式URL:['./table.component.css']
})
导出类TableComponent{
displayedColumns=[“位置”、“名称”、“重量”、“符号”]；
数据源=新MatTableDataSource（元素数据）；
项目：任何；
@ViewChild（MatPaginator）分页器：MatPaginator；
构造函数（专用路由器：路由器，专用路由：ActivatedRoute，专用http:HttpClient，公共对话框：MatDialog）{}
恩戈尼尼特（）{
this.http.get（'/item'）.subscribe（数据=>{
console.log（“数据>>>>”，数据）；
此项=数据；
});
}
ngAfterViewInit（）{
this.dataSource.paginator=this.paginator；
}
}
导出接口元素{
名称：字符串；
职位：编号；
重量：个数；
符号：字符串；
}
常量元素_数据：元素[]=[
{位置：1，名称：'Hydrogen'，重量：1.0079，符号：'H'}，
{位置：2，名称：'氦'，重量：4.0026，符号：'他'}，
{位置：3，名称：'锂'，重量：6.941，符号：'锂'}，
{位置：4，名称：'铍'，重量：9.0122，符号：'铍'}，
{位置：5，名称：'硼'，重量：10.811，符号：'B'}，
];

我的HTML：

<div class="example-container mat-elevation-z8">

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



    <!-- Position Column -->

    <ng-container matColumnDef="position">

      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>

      <mat-cell *matCellDef="let element"> {{element.position}} </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>



    <!-- Weight Column -->

    <ng-container matColumnDef="weight">

      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>

      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>

    </ng-container>



    <!-- Symbol Column -->

    <ng-container matColumnDef="symbol">

      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>

      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>

    </ng-container>



    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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

  </mat-table>



  <mat-paginator #paginator

                 [pageSize]="10"

                 [pageSizeOptions]="[5, 10, 20]">

  </mat-paginator>

</div>

不
{{element.position}
名称
{{element.name}
重量
{{element.weight}}
象征
{{element.symbol}

我建议您查看一下$http文件（$http）

---

您将使用它通常向API端点发出HTTP请求。API端点返回的内容将用于实例化新定义的类，以便在视图中使用。

您需要将从后端获得的新数据传递到将加载到表中的数据源

在您的组件中，更改以下内容：

dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

---

问题是关于角度的，而不是Angularjsah-yep，忽略了这一点。但是也适用类似的原则。在src/app/table/table.component.ts（23,15）中获取错误：错误TS2314:泛型类型“MatTableDataSource”需要1个类型参数。确定，因此它必须是这样的：dataSource=new MatTableDataSource（）；但是现在this.items需要是元素类型。。。。console.log打印什么？您可能需要循环数据并使用forEachconsole创建一个元素，我得到这个[{位置：1，名称：'氢'，重量：1.0079，符号：'H'}，{位置：2，名称：'氦'，重量：4.0026，符号：'He'}，{位置：3，名称：'锂'，重量：6.941，符号：'Li'}，{位置：4，名称：'铍'，重量：9.0122，符号：'Be'}，{位置：5，名称：'硼'，重量：10.811，符号：'B'}，]；你能在这方面帮我一下吗？你是否更改了dataSource声明的行：dataSource=new MatTableDataSource（）；你现在犯了什么错误？

dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

dataSource = new MatTableDataSource<Element>();

ngOnInit() {

    this.http.get('/item').subscribe(data => {

      console.log("data>>>>>",data);

      this.items = data;

      this.dataSource.data = this.itens;
    });

  }