正在从subscribe()方法提取数据

Question

我真的不知道如何从subscribe((方法中提取值。

getMessages(): any {
this.gatewayMessagesState$.subscribe(data => data.gatewayMessages
.get(this.gatewayId)
?.list
.map(Message => Message.message));
}

gatewayMessagesState是一个包含一些数据的初始状态。gatewayMessages是一个以gatewayId为键、以Message对象数组为值的映射。消息的消息字段只是一个字符串。我想为给定的id提取一组消息。我该怎么做？

Answer 1

如果你想将数据作为可观察的消息检索为字符串，你可以将函数return定义为this，并使用rxjs中的管道和映射运算符，这是下面的代码，这是我的主张

getMessages(): observable<string[]>{
return this.gatewayMessagesState$.pipe(map((data) =>
data.filter((f) => f.gatewayMessages.id ===this.gatewayId)),
map(item => item.message));
}

Answer 2

您可能想要做的是用数据填充另一个Observable，这样您就可以在项目的其他地方访问它，而不需要多次调用API
要做到这一点，您需要创建一个Subject(在本例中为BehaviorSubject(，当API调用返回响应时，您可以用数据填充该Subject
然后，为了在其他地方访问此数据，您可以创建一个"；得到"；函数在需要数据时返回Subject(它本身就是一个Observable(
这里有一个例子：

my-data.service.ts

myData: BehaviorSubject < number > = new BehaviorSubject < number > (0);
callApi() {
this.dbService.get('apiUrl').subscribe(
(data) = > this.myData.next(data) // Assuming data is a 'number'
);
}
getMyData() {
return this.myData.asObservable();
}

现在在组件中使用这个：

this.myService.getMyData().subscribe(
(data) = > {
/* Use the value from myData observable freely */
}
);

或者，您可以依赖Angular异步管道(这是一种处理代码中可观察性的非常方便的方法(。

Answer 3

您没有指定getMessages是否在服务、组件。。。在任何情况下，我建议返回Observable，而不在getMessages函数中订阅它

// this function could be anywhere
getMessages(): Observable<string[]> {
return this.gatewayMessagesState$.pipe(
map((data) => data.gatewayMessages.get(this.gatewayId)),
map((yourMap) => yourMap?.list.map((theMessage) => theMessage.message))
);
}

现在，如果你需要从组件、服务等中提取这个值，那么，只需调用这个函数，然后订阅即可获得结果

假设getMessages在服务文件中，例如

您的组件

constructor(private theService: YourService) {}

anotherFunction() {
this.theService.getMessages().subscribe((myMessages) => console.log(myMessages));
}

或者让异步管道订阅这个可观察的

您的组件

messages$!: Observable<string[]>
constructor(private theService: YourService) {}
anotherFunction() {
this.messages$ = this.theService.getMessages()
}

您的组件html

<ng-container *ngIf="messages$ | async as messages">
<div *ngFor="let message of messages">
<p>{{ message }}</p> 
</div>
</ng-container>