Question

我有一个提供搜索功能的angular组件。当用户输入值时，它将调用服务代码，该服务代码将调用POST API并根据查询检索结果。我想在使用角度材料库的表集中显示该结果。如何将数据源与服务代码连接，以便当数据来自服务代码时更新数据源的表组件。这是我的组件代码

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()和disconnect()方法，但我仅看到带有GET请求的示例。我需要将参数传递给服务代码

Answer 1

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

使用角度材料数据表将DataSorce与api连接

1 个答案: