如何将从服务到数组的可观察值转换为Angular2中的ngFor？
在Angular2中，可以通过使用管道（pipe）来将从服务到数组的可观察值转换为ngFor。下面是一个完整的答案：
将从服务到数组的可观察值转换为Angular2中的ngFor，可以使用管道（pipe）来实现。管道是Angular中的一个特性，用于对数据进行转换和格式化。
首先，确保你已经导入了Observable和管道相关的依赖：
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';然后，在你的组件中，使用可观察值（Observable）来获取从服务返回的数据。假设你的服务方法是getData()，返回的是一个可观察值：
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app',
template: `
<ul>
<li *ngFor="let item of data | async">{{ item }}</li>
</ul>
`,
providers: [DataService]
})
export class AppComponent {
data: Observable<any[]>;
constructor(private dataService: DataService) {
this.data = this.dataService.getData();
}
}在上面的代码中，我们使用了async管道来订阅可观察值并自动更新视图。dataService.getData()返回的是一个可观察值，我们将其赋值给data属性。
最后，在模板中使用*ngFor指令来循环遍历data数组，并显示每个项。
这是一个简单的示例，你可以根据实际需求进行修改和扩展。关于Angular2中的ngFor和可观察值的更多信息，你可以参考以下链接：
相关·内容
1回答
async管道(在本例中与*ngFor结合使用)是用来订阅可观察的，并取消手动订阅。看看网上的例子：案例2:绑定到包含诸如Observable<User[]>之类的项数组的可观察到的
案例
浏览 3提问于2017-09-12得票数 0
我有一个关于返回类型的问题。这是我的问题:首先，我的数据结构是：{"categoryName":"Google","id":"58591d2b7672d99910497bec","clientId":"585808f6737f6aad1985eab2:"Msn","id":"585d25f6ae4b2ecb056bc514","clientId":&qu
浏览 11提问于2017-01-31得票数 0
回答已采纳
1回答
好的，谁能帮帮我，我觉得我要疯了！一切听起来都不错，但我在实现它们时遇到了很多问题。我需要关于如何在angular2中使用可观察数组并绑定到它的帮助，以及使用可观察数组的好处是什么？我有一个名为addComment<e
浏览 3提问于2017-03-06得票数 3
回答已采纳
4回答
如何从包含使用html的数组的可观察到的值中获取单个值。我正在运行Angular2 w/类型记录private observable = Observable.of([1,2,3,4,5])<p>{{observable[2]}}</p>
，即得到可观察到的索引2中</e
浏览 3提问于2017-04-21得票数 1
回答已采纳
2回答
我在使用*ngFor发出可观察到的数据时遇到了困难。我在我的数据服务中有以下电话： return this.aHttpService.get<ArrayObservable<Array<Todo>> { }
然后，我使用以
浏览 0提问于2018-10-14得票数 0
回答已采纳
2回答
我编写了一个对后端执行http查询的服务： this.http.get("http://localhost:8080/processPlaces")}此外，我寻找最佳实践。
浏览 0提问于2016-01-12得票数 0
回答已采纳
如何在angular2中创建具有动态列和行的表this.如何使列和列标题也是动态的，例如，如何提取数组中的所有JSON键以将另一个循环放在顶部。为了澄清我的后端服务可能返回不同的数据集，具有不同的列和行，我希
浏览 4提问于2016-11-21得票数 1
回答已采纳
在我的app组件中，我使用构造函数来引入一个服务。MyService作为一个参考，这是一个测试服务的数据流从一个IOT设备。我想知道的是，是否使用下面的方法，还是将输入data1设置为数组。或者，我正在阅读有关可观测性和流的内容，并在DOM/模板中直接绑定到Ng-If-as中。
下面使用ngFor的dom是可以的，但是当我使用ngIf作为异步管道时，它会
浏览 2提问于2022-09-30得票数 0
回答已采纳
2回答
我有一个ng选择控件的动态数组。由类表示的每个控件。 <ng-select #select"> console.log(x);
浏览 10提问于2022-11-02得票数 1
回答已采纳
我正试图找出如何向下钻取一个数组，在一个角2应用程序中的另一个数组集合中迭代。在我的组件中，我在角的ngOnInit生命周期钩子中订阅了这样一个可观察到的： const records = this.filtersService.getByFilter数据”数组，如下所示：
<tr *ngFor</
浏览 1提问于2017-06-26得票数 3
回答已采纳
1回答
但在我看来，我想将这个Redux存储状态分配给一个可观察到的$变量，这个角度视图可以绑定到这个变量，并随着状态的变化而更新。中的视图时，会得到一个错误，说明viewData不符合数组..ngFor didn't expect [Object object]的正确格式。<div *ngFor="let data of viewData| async">
浏览 3提问于2019-11-15得票数 0
我想在Angular2服务中编写一个简单的切换。import {Subject} from 'rxjs/Subject';
}
如何<
浏览 0提问于2016-03-15得票数 11
回答已采纳
19回答
我无法将这段代码从Angualr 1转换为角2：这就是我按照蒂埃里·坦普利埃的回答所做的：组件代码： selector: 'my-app',
浏览 11提问于2016-02-02得票数 108
4回答
我使用Angular2异步管道将值流到DOM中。"; return n; });
{{num}}我想做的是显示我读过关于catch和onErrorResumeNext等的文章，但是它们都涉及到另一个序列，
浏览 4提问于2016-07-06得票数 22
回答已采纳
3回答
我的服务类上有一个属性，如下所示：它使用标准的getArticles()解决方案由http.get().map() ()函数填充。如何手动将一篇新文章推入到这个数组中；该数组尚未持久化，因此不属于http？。我的场景是，您创建一篇新文章，在保存它之前，我希望Article[]数组将这个新的条目推送到它，以便它出现在我<e
浏览 4提问于2017-11-22得票数 18
回答已采纳
1回答
我需要从不同的服务中获取这些对象，但是我很难理解如何处理多个可观察到的对象，以及依赖于返回的前一个值的对象。
我正在获取一个Info数组，然后遍历该数组，从另一个服务中获取Participant对象。我正在将组件的视图部分分配到可观察范围之外，因此我遇到了显示值的问题，直到实
浏览 0提问于2021-12-28得票数 0
回答已采纳
我所犯的错误：在refreshComponent (core.js:13449)
如果我有一个以上的对象当数据如下图所示时，我理解数组或对象有问题，但我无法弄清楚。因此，当我有两个对象时，我会
浏览 8提问于2020-05-31得票数 0
回答已采纳
1回答
我正在将我的应用程序从NG2转换为本地i18n支持。当涉及到用几个选项翻译一个问题时，它会面临一个问题： <md-option *ngFor="let s of salutations" [value]="s.value">{{s.name}}</md-option>
<&
浏览 3提问于2017-04-05得票数 0
回答已采纳
我正在尝试创建一个存储来管理我的数据，然后在我的组件中使用这个存储。App是用Ionic2和Angular2构建的。下面是我如何建模我的数据存储的链接 //post to server, nothing more, nothing returned
}
浏览 1提问于2016-09-27得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
