これが機能しない理由はわかりませんが、以下の代替方法は機能します。
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: ['./app.component.css']
})
export class AppComponent {
id = 0;
obs = new Subject();
changeValue() {
this.fakeApiCall(this.id++)
.pipe(first())
.subscribe(this.obs);
}
fakeApiCall(id: number) {
return new Observable(observer => {
console.log('called with id ' + id);
observer.next({ items: [id, Math.random()] });
});
}
}
app.component.html
<h1>
<div *ngIf="(obs | async) as v">
<ul>
<li *ngFor="let item of v.items">
{{ item }}
</li>
</ul>
<ul>
<li *ngFor="let item of v.items">
{{ item }}
</li>
</ul>
</div>
<div *ngIf="(obs | async) as v">
<ul>
<li *ngFor="let item of v.items">
{{ item }}
</li>
</ul>
<ul>
<li *ngFor="let item of v.items">
{{ item }}
</li>
</ul>
</div>
<button (click)="changeValue()">increase counter</button>
</h1>
「カウンターを増やす」ボタンをクリックすると、最初に値が取得されますが、その後は取得されませんが、これらの選択肢は問題なく機能します。
changeValue() {
this.fakeApiCall(this.id++)
.subscribe(this.obs)
.unsubscribe();
}
または
changeValue() {
this.fakeApiCall(this.id++)
.pipe(take(2)) // NOTES: if I write take(1), it has the same effect.
.subscribe(this.obs);
}
これはバグなのか、それともここで実際に何が起こっているのか、私は混乱しています。
編集：stackblitzのURLが必要な場合は、https：//stackblitz.com/edit/angular-28eyiy
これは、問題は、あなたが加入している方法である、バグではありませんSubjectでsubscribe(this.obs)。
使用subscribe(this.obs)すると、すべての通知がSubjectインスタンスに渡されます。この手段next、completeおよびerror通知。そして、ここに問題がありfirst()ます。最初の放出の後にチェーンを完了します（ところで、RxJSを使用したAngular 2を参照-take（1）vs first（））。これはnext、1つと1つのcomplete通知を渡すことを意味します。ときは、Subject受信complete通知、あなたが別のチェーンに再びそれをサブスクライブしても、その停止となります決して再放出何も（これはの一部である「観察可能な契約」）。
したがってSubject、複数のサブスクリプションで同じものを使用して、それらが完了することがわかっている場合は、next通知のみを渡すことができ、それ以上Subjectは何も渡すことができません（アクティブのままになります）。
.subscribe(v => this.obs.next(v));
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加