Javascript 角度：如何订阅服务中不断变化的数据变量作为角度材质表的数据源

我需要一些指导。如何订阅一个不断更新的变量（searchData-我的搜索结果的值）作为角度材质表中使用的数据源

我有一个

表datasource.ts

文件，我想在其中订阅

search.service.ts

数据变量的搜索结果

我想我可以使用

BehaviorSubject

，但我不确定如何正确实现这一点

我的

表-datasource.ts文件中有以下基本设置：

：

dataSource = new MatTableDataSource<SearchRecord>();

ngOnInit() {
  this.dataSource.data = this.searchService.searchData; // this is where I would like to subscribe to the data changes
}

search(): Observable<SearchRecord[]>  {

return this.http
  .get<SearchRecord[]>(this.baseUrl + searchUrl + birthdate + partytype, { headers: httpHeaders })
  .pipe(
    retry(3),
    map((responseData: SearchRecord[]) => {
      let response: SearchRecord[] = [];
      this.searchData = responseData; // This is the variable I would like to subscribe to
      response = responseData;

      return response;
    }),
    catchError(errorRes => {
      // Send to analytics server
      return throwError(errorRes);
    }));
}

searchData = new BehaviorSubject<SearchRecord[]>(null);

map((responseData: SearchRecord[]) => {
  let response: SearchRecord[] = [];
  this.searchData.next(responseData); // Call .next on returned data
  response = responseData;

  return response;
}),

  ngOnInit() {
    this.searchService.searchData.subscribe(data => {
      this.dataSource.data = data;
    });
  }

dataSource=new MatTableDataSource（）；
恩戈尼尼特（）{
this.dataSource.data=this.searchService.searchData；//我想在这里订阅数据更改
}

这是我的搜索。服务：

dataSource = new MatTableDataSource<SearchRecord>();

ngOnInit() {
  this.dataSource.data = this.searchService.searchData; // this is where I would like to subscribe to the data changes
}

search(): Observable<SearchRecord[]>  {

return this.http
  .get<SearchRecord[]>(this.baseUrl + searchUrl + birthdate + partytype, { headers: httpHeaders })
  .pipe(
    retry(3),
    map((responseData: SearchRecord[]) => {
      let response: SearchRecord[] = [];
      this.searchData = responseData; // This is the variable I would like to subscribe to
      response = responseData;

      return response;
    }),
    catchError(errorRes => {
      // Send to analytics server
      return throwError(errorRes);
    }));
}

searchData = new BehaviorSubject<SearchRecord[]>(null);

map((responseData: SearchRecord[]) => {
  let response: SearchRecord[] = [];
  this.searchData.next(responseData); // Call .next on returned data
  response = responseData;

  return response;
}),

  ngOnInit() {
    this.searchService.searchData.subscribe(data => {
      this.dataSource.data = data;
    });
  }

search（）：可观察{
返回此文件。http
.get（this.baseUrl+searchUrl+birthdate+partytype，{headers:httpHeaders}）
.烟斗(
重试（3），
map（（responseData:SearchRecord[]）=>{
let响应：SearchRecord[]=[]；
this.searchData=responseData；//这是我想要订阅的变量
响应=响应数据；
返回响应；
}),
catchError（errorRes=>{
//发送到分析服务器
回击投手（errorRes）；
}));
}

随信附上我的解决方案：

在我的服务中，我将数据变量设置为new

BehaviorSubject

，并在返回的数据上实现了

.next（）

发射器。然后，我只是订阅了组件中的服务变量

将变量设置为服务中的行为主体：

dataSource = new MatTableDataSource<SearchRecord>();

ngOnInit() {
  this.dataSource.data = this.searchService.searchData; // this is where I would like to subscribe to the data changes
}

search(): Observable<SearchRecord[]>  {

return this.http
  .get<SearchRecord[]>(this.baseUrl + searchUrl + birthdate + partytype, { headers: httpHeaders })
  .pipe(
    retry(3),
    map((responseData: SearchRecord[]) => {
      let response: SearchRecord[] = [];
      this.searchData = responseData; // This is the variable I would like to subscribe to
      response = responseData;

      return response;
    }),
    catchError(errorRes => {
      // Send to analytics server
      return throwError(errorRes);
    }));
}

searchData = new BehaviorSubject<SearchRecord[]>(null);

map((responseData: SearchRecord[]) => {
  let response: SearchRecord[] = [];
  this.searchData.next(responseData); // Call .next on returned data
  response = responseData;

  return response;
}),

  ngOnInit() {
    this.searchService.searchData.subscribe(data => {
      this.dataSource.data = data;
    });
  }

订阅我的组件中的服务变量：

dataSource = new MatTableDataSource<SearchRecord>();

ngOnInit() {
  this.dataSource.data = this.searchService.searchData; // this is where I would like to subscribe to the data changes
}

search(): Observable<SearchRecord[]>  {

return this.http
  .get<SearchRecord[]>(this.baseUrl + searchUrl + birthdate + partytype, { headers: httpHeaders })
  .pipe(
    retry(3),
    map((responseData: SearchRecord[]) => {
      let response: SearchRecord[] = [];
      this.searchData = responseData; // This is the variable I would like to subscribe to
      response = responseData;

      return response;
    }),
    catchError(errorRes => {
      // Send to analytics server
      return throwError(errorRes);
    }));
}

searchData = new BehaviorSubject<SearchRecord[]>(null);

map((responseData: SearchRecord[]) => {
  let response: SearchRecord[] = [];
  this.searchData.next(responseData); // Call .next on returned data
  response = responseData;

  return response;
}),

  ngOnInit() {
    this.searchService.searchData.subscribe(data => {
      this.dataSource.data = data;
    });
  }

我希望这能帮助别人

随信附上我的解决方案：

在我的服务中，我将数据变量设置为new

BehaviorSubject

，并在返回的数据上实现了

.next（）

发射器。然后，我只是订阅了组件中的服务变量

将变量设置为服务中的行为主体：

dataSource = new MatTableDataSource<SearchRecord>();

ngOnInit() {
  this.dataSource.data = this.searchService.searchData; // this is where I would like to subscribe to the data changes
}

search(): Observable<SearchRecord[]>  {

return this.http
  .get<SearchRecord[]>(this.baseUrl + searchUrl + birthdate + partytype, { headers: httpHeaders })
  .pipe(
    retry(3),
    map((responseData: SearchRecord[]) => {
      let response: SearchRecord[] = [];
      this.searchData = responseData; // This is the variable I would like to subscribe to
      response = responseData;

      return response;
    }),
    catchError(errorRes => {
      // Send to analytics server
      return throwError(errorRes);
    }));
}

searchData = new BehaviorSubject<SearchRecord[]>(null);

map((responseData: SearchRecord[]) => {
  let response: SearchRecord[] = [];
  this.searchData.next(responseData); // Call .next on returned data
  response = responseData;

  return response;
}),

  ngOnInit() {
    this.searchService.searchData.subscribe(data => {
      this.dataSource.data = data;
    });
  }

订阅我的组件中的服务变量：

dataSource = new MatTableDataSource<SearchRecord>();

ngOnInit() {
  this.dataSource.data = this.searchService.searchData; // this is where I would like to subscribe to the data changes
}

search(): Observable<SearchRecord[]>  {

return this.http
  .get<SearchRecord[]>(this.baseUrl + searchUrl + birthdate + partytype, { headers: httpHeaders })
  .pipe(
    retry(3),
    map((responseData: SearchRecord[]) => {
      let response: SearchRecord[] = [];
      this.searchData = responseData; // This is the variable I would like to subscribe to
      response = responseData;

      return response;
    }),
    catchError(errorRes => {
      // Send to analytics server
      return throwError(errorRes);
    }));
}

searchData = new BehaviorSubject<SearchRecord[]>(null);

map((responseData: SearchRecord[]) => {
  let response: SearchRecord[] = [];
  this.searchData.next(responseData); // Call .next on returned data
  response = responseData;

  return response;
}),

  ngOnInit() {
    this.searchService.searchData.subscribe(data => {
      this.dataSource.data = data;
    });
  }

---

我希望这能帮助别人

下面是一个stackblitz示例：

基于“通过HTTP检索数据的表”

如果您有一个可观察的数据源，如下所示：

  getData(): Observable<{items: MyData[]}> {
    return new Observable(subscriber => {
      this.myNext(subscriber);
    });;
  }

您只需订阅：

this.getData().subscribe(data =>
  {this.data = data.items; this.resultsLength = data.items.length; });

---

下面是一个stackblitz示例：

基于“通过HTTP检索数据的表”

如果您有一个可观察的数据源，如下所示：

  getData(): Observable<{items: MyData[]}> {
    return new Observable(subscriber => {
      this.myNext(subscriber);
    });;
  }

您只需订阅：

this.getData().subscribe(data =>
  {this.data = data.items; this.resultsLength = data.items.length; });