Question

我在Angular应用程序中成功使用了Observables。到目前为止，我已在组件中明确订阅，然后使用* ngFor迭代视图中的记录数组。现在我想通过在各种视图中使用Angular的异步管道来简化事情 - 这样就可以处理订阅和取消订阅。到目前为止，这还不起作用。

这是我原来的（我在组件中订阅的地方）：

ngOnInit() {
    this.clientService.getAll(1, this.pagesize)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            console.log(this.records);
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
}

然后在视图中我正在做以下事情：

<tr *ngFor="let record of records.data>

顺便说一句，来自API的数据结构如下所示（我正在迭代的记录在＆＃34;数据＆＃34;数组内，因此＆＃34; records.data＆＃34;在*中ng For above）：

{
  "count": 15298,
  "data": [
    {

因此，为了转向使用异步管道，我将组件ngOnInit调用更改为this，我明确地将其声明为可观察对象，并将其分配给变量＆＃34;记录＆＃34; ：

ngOnInit() {
    const records: Observable<any> = this.clientsService.getAll(1, this.pagesize);
    console.log(this.records);
}

我还将来自RxJs的可观察导入带入了组件，如下所示：

import { Observable } from 'rxjs/Observable';

然后在视图中我添加了异步管道，如下所示：

<tr *ngFor="let record of records.data | async">

正如我所说，这不起作用。我没有收到任何控制台错误，我只是没有看到填充到视图中的任何数据。此外，在控制台中，＆＃34;记录＆＃34;是一个空数组。

顺便说一下，我的服务＆＃34; getAll＆＃34;电话看起来像这样：

getAll(page, pagesize) {
    return this.http.get
    (`https://api.someurl.com/${this.ver}/clients?apikey=${this.key}&page=${page}&pagesize=${pagesize}`)
        .map((response: Response) => response.json())
        .catch(this.errorHandler);
}
    errorHandler(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

我不确定还有什么必要通过此处的异步管道通过订阅填充结果。我的代码中有什么想法丢失或错误吗？

Answer 1

records$: Observable<any>;

ngOnInit() {
  this.records$ = this.clientService.getAll(1, this.pagesize);
}

视图中的

（假设您使用的是Angular 4 +）：

<table *ngIf="records$ | async as records">
  <tr *ngFor="let record of records.data">

Answer 2

TileContent tContent = new TileContent(); TileVisual tVisual = new TileVisual(); TileBinding tTileSmall = new TileBinding(); TileBindingContentAdaptive tTileContent = new TileBindingContentAdaptive(); AdaptiveText tChildren = new AdaptiveText(); tChildren.Text = "Small"; tTileContent.Children.Add(tChildren); tTileSmall.Content = tTileContent; tVisual.DisplayName = "El Dudenheimer"; tVisual.TileSmall = tTileSmall; tVisual.TileMedium = tTileSmall; tVisual.TileLarge = tTileSmall; tVisual.TileWide = tTileSmall; tContent.Visual = tVisual; string contentString = string.Empty; foreach(var node in tContent.GetXml().ChildNodes) { contentString += node.GetXml(); } var notification = new TileNotification(tContent.GetXml()); TileUpdateManager.CreateTileUpdaterForApplication().Update(notification); contentString with .NET Toolchain on - <?xml version="1.0"?><tile><visual/></tile> contentString with .NET Toolchain off - <?xml version="1.0"?><tile><visual displayName="El Dudenheimer"><binding template="TileSmall"><text>Small</text></binding><binding template="TileMedium"><text>Small</text></binding><binding template="TileWide"><text>Small</text></binding><binding template="TileLarge"><text>Small</text></binding></visual></tile>是一个局部变量。您需要将其设为一个字段，以便模板可以访问此变量。

例如：

const records

异步管道未处理Angular 2应用程序中预期的订阅

2 个答案: