blocks|key|4412335|text|要从可观察对象获取数据，您需要订阅：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412336|this.singleEvents$.subscribe(event+=>+this.event+=+event);|code-block|syntax|javascript|4412337|在模板中，您可以使用async+pipe直接绑定到可观察对象|offset|length|4412338|{{singleEvents$+%7C+async}}|4412339|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/common/AsyncPipe^0|0|0|A|A|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

To get data from an observable, you need to subscribe:

<pre><code>this.singleEvents$.subscribe(event =&gt; this.event = event);
</code></pre>

In the template you can directly bind to observables using the <a href="https://angular.io/api/common/AsyncPipe" rel="noreferrer">async pipe</a>:

<pre><code>{{singleEvents$ | async}}
</code></pre>

blocks|key|4412387|text|为了补充Günter+Zöbauer的答案，如果您希望同步获取可观察对象内部的值，则BehaviorSubject可能就是您正在寻找的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412388|BehaviorSubject是一个始终具有值的可观察对象，您可以调用myBehaviorSubject.getValue()或myBehaviorSubject.value来同步检索BehaviorSubject当前持有的值。|offset|length|style|CODE|4412389|因为它本身也是一个可观察的，你仍然可以订阅BehaviorSubject来异步地反应它持有的值的变化(例如myBehaviorSubject.subscribe(event+=>+{+this.event+=+event+}))，并在你的组件模板中使用异步管道(例如{{+myBehaviorSubject+%7C+async+}})。|4412390|下面是一些与给定示例相匹配的用法，用于在给定服务的组件中创建BehaviorSubject：|4412391|@Component({
++//...
})
export+class+YourComponent+implements+OnInit+{
++singleEvent$:+BehaviorSubject<Event>;

++constructor(private+eventService:+EventService){}

++ngOnInit(){
++++const+eventid+=+'id';+//+<--+actual+id+could+go+here
++++this.eventService.events$
++++++.pipe(
++++++++map(events+=>+{
++++++++++let+eventObject+=+events.find(item+=>+item.id+===+eventid);
++++++++++let+eventClass:+Event+=+new+Event(eventObject);
++++++++++return+eventClass;
++++++++})
++++++)
++++++.subscribe(event+=>+{
++++++++if(!this.singleEvent$){
++++++++++this.singleEvent$+=+new+BehaviorSubject(event);
++++++++}+else+{
++++++++++this.singleEvent$.next(event);
++++++++}
++++++});
++}
}|code-block|syntax|javascript|4412392|entityMap^0|0|Z|S|1S|N|0|1H|1O|3P|V|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|14|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

To add on to Günter Zöbauer's answer, a BehaviorSubject may be what you are looking for if you're looking to synchronously get the value inside of your Observable. 

A BehaviorSubject is an Observable that always has a value, and you can call <code>myBehaviorSubject.getValue()</code> or <code>myBehaviorSubject.value</code> to synchronously retrieve the value the BehaviorSubject currently holds. 

Since it is itself an observable as well, you can still subscribe to the BehaviorSubject to asynchronously react to changes in the value that it holds (e.g. <code>myBehaviorSubject.subscribe(event =&gt; { this.event = event })</code>) and use the async pipe in your component's template (e.g. <code>{{ myBehaviorSubject | async }}</code>).

Here's some usage to match your given example to create a BehaviorSubject in your component from the given service:

<pre><code>@Component({
 //...
})
export class YourComponent implements OnInit {
 singleEvent$: BehaviorSubject&lt;Event&gt;;

 constructor(private eventService: EventService){}

 ngOnInit(){
 const eventid = 'id'; // &lt;-- actual id could go here
 this.eventService.events$
 .pipe(
 map(events =&gt; {
 let eventObject = events.find(item =&gt; item.id === eventid);
 let eventClass: Event = new Event(eventObject);
 return eventClass;
 })
 )
 .subscribe(event =&gt; {
 if(!this.singleEvent$){
 this.singleEvent$ = new BehaviorSubject(event);
 } else {
 this.singleEvent$.next(event);
 }
 });
 }
}
</code></pre>

blocks|key|4412308|text|您可以使用observable.pipe(take(1)).subscribe将可观察对象限制为只获取一个值，并停止侦听更多值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4412309|let+firstName:+string;+

++++++++this.insureFirstName
++++++++++++.pipe(take(1))++//this+will+limit+the+observable+to+only+one+value
++++++++++++.subscribe((firstName:+string)+=>+{
++++++++++++++++this.firstName+=+firstName;+asssgning+value+
++++++++++++});
++++++++console.log(this.firstName);+//accessing+the+value|code-block|syntax|javascript|4412310|entityMap^0|5|Y|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You can use <code>observable.pipe(take(1)).subscribe</code> to limit the observable to get only one value and stop listening for more. 

<pre><code>let firstName: string; 

 this.insureFirstName
 .pipe(take(1)) //this will limit the observable to only one value
 .subscribe((firstName: string) =&gt; {
 this.firstName = firstName; asssgning value 
 });
 console.log(this.firstName); //accessing the value
</code></pre>

blocks|key|4412341|text|补充@ZackDeRose在@Günter+Zöchbauer回复中添加的内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412342|private+beneficiary+=+new+BehaviorSubject<__IBeneficiary>(newBeneficiary);
beneficiary$+=+this.beneficiary.asObservable();

setBeneficiaryInfo(beneficiary:+__IBeneficiary):+void+{
++++this.beneficiary.next(beneficiary);
++++//+when+your+you+subscribe+to+beneficiary$+you+would+get+the+new+value
}

/*+when+implementing+in+component+or+other+function
+++this.beneficiary$.subscribe(
++++++++item+=>+{
++++++++++++//+use+current+value
++++++++}
++++);
*/

modePersonalInformation(personalInfo,+mode:+string):+Observable<any>+{
++++const+$beneficiary+=+this.beneficiary.value;+
++++//+this+will+get+the+current+observable+value+without+the+subscrib+callback+function
++++return+this.http.post<any>(
++++++++`${this.apiURL}/${mode}-biography/personal`+%2B+((mode+===+'update'+&&+$beneficiary?.id)+?+`/${$beneficiary.id}`+:+''),
++++++++{...personalInfo},
++++++++this.httpOptions
++++)
}|code-block|syntax|javascript|4412343|您必须添加一些条件条件来检查是否要使用现有对象|4412344|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Adding to what @ZackDeRose was adding on @Günter Zöchbauer response
<pre><code>private beneficiary = new BehaviorSubject&lt;__IBeneficiary&gt;(newBeneficiary);
beneficiary$ = this.beneficiary.asObservable();

setBeneficiaryInfo(beneficiary: __IBeneficiary): void {
 this.beneficiary.next(beneficiary);
 // when your you subscribe to beneficiary$ you would get the new value
}

/* when implementing in component or other function
 this.beneficiary$.subscribe(
 item =&gt; {
 // use current value
 }
 );
*/

modePersonalInformation(personalInfo, mode: string): Observable&lt;any&gt; {
 const $beneficiary = this.beneficiary.value; 
 // this will get the current observable value without the subscrib callback function
 return this.http.post&lt;any&gt;(
 `${this.apiURL}/${mode}-biography/personal` + ((mode === 'update' &amp;&amp; $beneficiary?.id) ? `/${$beneficiary.id}` : ''),
 {...personalInfo},
 this.httpOptions
 )
}
</code></pre>
you would have to put some conditionals to check if you want to use an existing object or not

In component :

<pre><code>singleEvent$: Observable&lt;Event&gt;;
</code></pre>

On init, I get observable

<pre><code>this.singleEvent$ = this._eventService.events$
 .map(function (events) {
 let eventObject = events.find(item =&gt; item.id === eventid);
 let eventClass: Event = new Event(eventObject);
 return eventClass;
 });
</code></pre>

How can I take current value like <code>event.name</code> ?

RxJs get value from observable

在组件中：singleEvent$: Observable<Event>;在init上，我可以观察到this.singleEvent$ = this._eventService.events$ .map(function (events) { let eventObject = events.find(item...

问RxJ从observable中获取值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问RxJ从observable中获取值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问RxJ从observable中获取值
EN