如何在Angular中获得观察值的特定字段？
在Angular中，可以通过使用RxJS的操作符来获得观察值的特定字段。以下是一种常见的方法：
- 首先，确保你已经导入了所需的RxJS操作符和Angular的相关模块。例如，你可以在组件文件的顶部添加以下导入语句：
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';- 假设你有一个名为
data$的观察值，它包含一个对象数组。你可以使用pipe方法和map操作符来选择特定字段。例如，如果你想获取每个对象的name字段，可以这样做：
specificField$: Observable<string[]> = this.data$.pipe(
map(data => data.map(obj => obj.name))
);在上面的代码中，specificField$是一个新的观察值，它只包含data$中每个对象的name字段。
- 在模板中，你可以使用
async管道来订阅并显示观察值的特定字段。例如，你可以这样使用：
<div *ngIf="specificField$ | async as specificField">
<ul>
<li *ngFor="let field of specificField">{{ field }}</li>
</ul>
</div>在上面的代码中，specificField$ | async将订阅specificField$观察值，并将其值赋给specificField变量。然后，你可以使用*ngFor指令在模板中循环显示特定字段的值。
这是一个简单的示例，展示了如何在Angular中获得观察值的特定字段。根据实际需求，你可以根据对象的不同字段进行选择和转换。对于更复杂的操作，你可以使用其他RxJS操作符来处理观察值。
相关·内容
1回答
向自定义对象抛出可观察的防火墙
、、、、
我是新的角度和防火墙，并试图找出如何将从防火墙接收到的数据直接到模型。这里最好的方法是什么？
目前我得到的数据，但它似乎没有抛入一个Blimp对象。当我试图在视图中调用getImageUrl()时，我会得到以下错误消息。
错误TypeError：_v.context.$implicit.getImageUrl不是一个函数
那么，我的问题是:什么是最好和最干净的方式，把这些观测数据投到正确的本地模型？我原以为在默认情况下标签会强制转换它。
当前代码
自定义模型类
export class Blimp {
created_at: Date;
file_location: string;
浏览 0提问于2019-08-01得票数 4
回答已采纳
我在rxjs中找到了一些使用了去反弹头和distinctUntilChanged的教程。我如何在angular 6中实现它？
教程代码如下：
var observable = Rx.Observable.fromEvent(input,'input');
observable.map(event=>event.target.value)
.debounceTime(2000)
.subscribe({
next:function(value){
console.log(value)
}
}
这是我的代码：
在htm
浏览 1提问于2018-07-26得票数 3
回答已采纳
2回答
当涉及到确保我取消订阅可观察订阅时，为了尝试和干燥我的代码，我创建了这个类：
// autounsubscribe.ts
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
export abstract class AutoUnsubscribe {
protected unsubscriber$ = new Subject<void>();
ngOnDestroy(): void {
this.unsubsc
浏览 0提问于2019-05-23得票数 0
comment.component.ts:
import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router'
import { Comment } from 'comment entity path'
import {CommentService} from 'comment service path'
import { Observable } from 'rxjs/Observable';
@Co
浏览 0提问于2017-03-16得票数 6
回答已采纳
1回答
我遵循阿波罗角指南，在ngFor指令中使用异步：
我找到了检查数据的方法：
<ng-container *ngIf="something.length; else nothing"></ng-container>
但是，在加载数据时，我似乎找不到显示加载旋转器的方法。
我试过了，但没有用：
*ngIf = "data | async as something; else loading"
指南中的代码：
import {Component, OnInit} from '@angular/core';
import {Apo
浏览 1提问于2018-11-23得票数 0
回答已采纳
在迭代可观察对象时，我遇到了这个错误。我知道它正在考虑将getNumbers方法的返回值作为对象而不是数组。但是，我不希望处理数据并创建数组，然后将其传递给视图。 我希望它是可观察的数字数组，并使用此数组与ngFor和异步来显示每个元素。请让我知道如何实现这一点。 以下是代码 import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class
浏览 20提问于2019-07-03得票数 0
回答已采纳
1回答
以下是解决相同问题的两种方法，即对用户在文本框中输入的某些字符进行反应性搜索。第一个解决方案来自，第二个解决方案来自即时搜索课程。
第一个解决方案使用Observable，第二个解决方案使用Subject。
Observable解决方案只使用takeUntil调用服务器一次。Subject解决方案使用distinctUntilChanged。
有人能解释一下这两种方法的优缺点吗？
使用可观察到的搜索：
@Injectable()
export class BookEffects {
@Effect()
search$: Observable<Action>
浏览 2提问于2017-03-06得票数 1
我正在获取这个JSON数据，它是一个对象数组，我需要对它进行重构/重新排序，以便在组件中呈现信息。
当前结构：
[
{
"name": "Rahul",
"class": 3,
"gender": "M",
"section": "B",
"rollNumber": "1231",
"sports": [
"Badminton",
"Ch
浏览 2提问于2019-09-29得票数 0
回答已采纳
2回答
ngOnInit()中有Observable<>。 ngOnInit() {
this.products$ = this.someService.getMissingProducts();
} this.products$是Observable类型，并且产品具有代码(字符串类型)成员字段。我想要将所有Product[]的代码值更改为新的值。 对于这个愚蠢的问题我很抱歉。我不擅长typescript和angular，所以我试图找到一些解决方案，但失败了。 有什么简单的方法吗？ 提前谢谢。 附注:我将此代码添加到我的解决方案中。谢谢爱德华 this.products$
浏览 60提问于2021-01-09得票数 0
回答已采纳
我的表格上有两处下降率。当我在字段中单击时，静态数组下拉(任务)显示了完整的列表。API(驱动程序管理器)中的对象数组仅在我在该字段和backspace中键入一个字母时显示完整的列表。当最初选择该字段时，如何使API筛选选项下拉显示？
import { Component, OnInit, OnChanges } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {Observable} f
浏览 1提问于2021-11-28得票数 1
回答已采纳
1回答
我想按日期对posts数组进行排序，但首先我想看看posts中是否有对象，帖子列表在html中显示正确，但在console.log中它看起来像undefined。你能帮帮我吗?
posts.component.ts
import { Component, OnInit } from '@angular/core';
import { Post } from '../post';
import { LoginService } from '../login.service';
import { ActivatedRoute } from '
浏览 0提问于2018-04-28得票数 1
我试图模拟一个支持分页的http请求。目前，此请求只返回一个数字。get请求的一个参数是数据库中使用的页码。
为了更简单，请考虑函数getData，它返回一个可观察到的返回页码的函数。
getData(page:number):Observable<number>{
return new Observable<number>(observer => {
observer.next(page)
})
}
在我的ngOnInit中，我声明：
data$!:Observer<number>
page:number = 0
浏览 12提问于2022-05-17得票数 0
4回答
我试图从一个*ngfor循环中删除重复的记录，并且只留下该记录点击次数最多的记录。
目标是显示来自用户的通过单击的URL，但是当前，当创建了相同URL的新记录时，它将显示在列表中。见下图：
点击正在按预期工作，但列表将在一段时间后变得难以辨认。我试图显示产品:离开衬衫，点击通过网址广告点击: 6，因为这是我需要显示的最新点击号码。显示具有旧的广告单击数据的同一产品的记录需要隐藏或从数组中删除。目前有相同的产品名称，URL和点击数据的记录，这些记录随着每次新的点击而增加。我可以定一个日期，当记录被创造，但这似乎有点粗俗和不雅。我宁愿展示最新的记录。
我尝试创建一个过滤器，其中筛选器将删
浏览 2提问于2019-09-05得票数 3
关于如何在HttpClient中使用Observable实现CRUD方法的新方法，我纠结于为数不多的Angular 5 Typescript文档，我想出了下一个代码，但仍然坚持显示来自web API的数据：
这是我的模型：
export interface Value {
id: number;
name: string;
}
我的服务：
export class ValueService {
baseUrl = environment.apiUrl;
constructor(private authHttp: HttpClient) {}
getValue
浏览 0提问于2018-04-03得票数 3
我目前正在笨拙地通过一个角4项目。到目前为止，我已经设法克服了大多数错误，但我还是找不出这个错误。
我试图使用*ngFor (异步)来显示可观察对象的列表。但是，我得到了错误“无法将Course[]分配给Observable< Course[] >"，但是我觉得我的服务正在返回Observable< Course[] >。
课程-列表.组件.：
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
impor
浏览 4提问于2017-10-25得票数 1
回答已采纳
1回答
我在catchError中使用了rxjs，并且熟悉pipe流中使用的pipe操作符，特别是对于HttpClient (XHR)调用
我的问题是catchError操作是如何工作的？它是如何捕捉引擎盖下的错误的？
import { throwError, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
//emit error
const source = throwError('This is an error!');
//gracefully handle erro
浏览 0提问于2018-12-01得票数 2
回答已采纳
所以，这就是我的用例:我从rest API获取一个observable，然后通过在模板中使用async来获取数据。单击时，我将获得特定用户的ID，然后使用该用户的数据填写表单。为了实现后者，我重用现有的观察值并过滤数据，然后订阅它。我想知道我的方法是否正确，因为我认为当我点击“编辑”来填写表单时，应用程序太慢了，所以我猜我在这里创建了太多的订阅或诸如此类的东西？
另外，为了便于讨论，我创建了两个可观察对象(user和users)，其中一个(user)获得了对另一个(users)的“引用”，然后它用async显示在模板中，同时我还订阅了它并将其设置为“常规”变量。这是一个问题吗？使用async显
浏览 0提问于2017-11-05得票数 0
我是RxJS的新手，在学习过程中遇到了困难。
我正在尝试使用异步管道将经验列表提供给*ngFor。
我创造了：
allLessons$: Observable<Lesson[]>;
所以我可以用
*ngFor="(allLessons$ | async) as lessons"
我正在调用一个本地api，它将返回数据。
const http$: Observable<Lesson[]> = createHttpObservable('/api/lessons');
const lessons$ = http$
.pipe(
浏览 0提问于2020-01-24得票数 0
回答已采纳
我不明白为什么这不起作用，但下面的备选方案确实有效。
app.component.ts
import { Component } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { first } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [
浏览 0提问于2019-03-10得票数 1
回答已采纳
1回答
我有一个输入字段，当用户键入搜索字符串时，我希望在执行_heroService http请求之前等待用户停止键入至少300毫秒(去抖动)。只有更改后的搜索值才能传递到服务(distinctUntilChanged)。switchMap返回一个新的可观察对象，它组合了这些_heroService可观察对象，以其原始请求顺序重新排列它们，并仅向订阅者提供最新的搜索结果。
我使用的是Angular 2.0.0-beta.0 0和TypeScript 1.7.5。
我怎么才能让这个东西正常工作呢？
我得到编译错误：
Error:(33, 20) TS2345: Argument of type
浏览 0提问于2016-02-23得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
