时间戳

首页 > 解决方案 > 使用角度材料数据表将数据源与 api 连接

angular5 - 使用角度材料数据表将数据源与 api 连接

问题描述

我有一个 angular 组件，它提供搜索功能。当用户输入值时，它会调用服务代码，然后调用 POST API 并根据查询检索结果。我想使用 angular-material library 在表集中显示该结果。如何将数据源与我的服务代码连接，以便在数据从服务代码到达时更新表组件。这是我的组件代码

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import {NgForm} from '@angular/forms';
import {CollectionViewer, DataSource} from "@angular/cdk/collections";

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

  constructor(private dataservice:DataService) { }

  ngOnInit() {
  }



datasource ; datafromservice ; 

displayedColumns = ['StudentName', 'StudentBatch', 'StudentEnrollment','StudentStatus','StudentStatusUpdate']; 


searchfunctionality(f:NgForm){


    console.log("Form Value",f.value);
this.datasource = new datafromservice(f.value);


    this.dataservice.searchstudent(f.value.enrollment_no).subscribe(
    data=>{
            this.datafromservice = data.data;
            console.log("Data",this.datafromservice);

           }

);
};

}

在各种博客上，作者建议使用connect()anddisconnect()方法，但我只看到 GET 请求的示例。我需要将参数传递给服务代码

标签： angular5angular-material-5

解决方案

在订阅块中获取组件中的数据后，只需调用datasource.update(newData)更新表

推荐阅读