Question

我具有以下配置。 onInit调用服务，该服务通过'async |管'。我的问题是，在组件上，如何进一步处理返回的数据？我希望我的服务获取数据，并且我的 component 还要捕获响应并按照其特别需要的方式处理响应，并更新视图？

component.ts

button

HTML

public view: Observable<GridDataResult>;
constructor(private serviceTest: IfpServiceTest)
{
    this.view = serviceTest;
}
public ngOnInit(): void
{
    this.serviceTest.queryForIFP(``, this.state);
}

ifp.service.ts

<kendo-grid [data]="view | async"> </kendo-grid>

Answer 1

您可以根据需要使用订阅和修改数据

TS

public view: Observable<GridDataResult>;
constructor(private serviceTest: IfpServiceTest)
{
    this.view = serviceTest;
}
public ngOnInit(): void
{
    this.serviceTest.queryForIFP(``, this.state).subscribe(resp => {
       console.log(resp); // here you can do further operations 
    });
}

HTML

<!-- In html we are not useing async pipe bcs we already use subscribe in TS -->
<kendo-grid [data]="view"> </kendo-grid>

Answer 2

就像使用管道运算符（映射，敲击等）来操纵ifp.service.ts中的数据一样，您可以在组件中执行相同的操作来进一步操纵数据。例如，这将使您能够将返回的数据存储在组件级别的变量中，或者在组件中调用函数来处理数据并返回结果，从而为您提供了仍通过异步管道处理订阅的优点。

public view: Observable<GridDataResult>;
constructor(private serviceTest: IfpServiceTest) {
  this.view = serviceTest;
  response;
}
public ngOnInit(): void {
  this.serviceTest.queryForIFP(``, this.state)
      .pipe(
          map(response => {
            this.response = response;
            return this.doSomethingWithResponse(response);
          })
      );
}

doSomethingWithResponse(response) {
  return response;
}

在您看来，与使用异步管道进行订阅之前一样：

<kendo-grid [data]="view | async"> </kendo-grid>

角度异步管道

2 个答案: