在多次刷新之前，可观察管道异步通常为空

Question

条件observable$ | async; else loading; let x在大多数情况下都会停止加载，并且只需要在浏览器中进行一些刷新即可显示数据。

这是我使用的代码：

export class CourseComponent implements OnInit {
course: Course;
sessions: Session[] = [];
sessionssubject$ = new Subject();
sessions$ = this.sessionssubject$.asObservable();
tasks: Task[] = [];
taskssubject$ = new Subject();
tasks$ = this.taskssubject$.asObservable();
constructor(
protected courseService: CoursesService,
protected taskService: TasksService,
protected sessionService: SessionsService) { }

ngOnInit() 
{

this.courseService.get(id).subscribe(
data =>{
this.course = data;
this.sessionService.getByCourseId(this.course.id).subscribe(
data => {
data.sort((a, b) => a.startDate < b.startDate ? -1 : 1);
this.sessions = data;
this.sessionssubject$.next(this.sessions)
}   
);
this.taskService.getByCourseId(this.course.id).subscribe(
data => {
this.tasks = data;
this.taskssubject$.next(this.tasks);
}
);
}
);
}

这里是使用的HTML文件的一部分：

<nb-card class="left-margin-10">
<nb-card-header>
Sessions
<button *ngIf="user.id == courseOwner.id" button nbButton status="success" class="float-right" (click)="open_session_modal(sessionDialog)">Add session</button>
</nb-card-header>
<nb-card-body>
<ng-container *ngIf="sessions$ | async; let sss">
<div *ngIf="sessions.length > 0; else nosession">
<nb-card *ngFor="let session of sss">
<nb-card-body>
<ng-container *ngIf='session.startDate < todayDate; else oldsession;'>
<div class="d-inline" *ngFor="let application of sessionsApplications">
<div class="d-inline"  *ngIf="application.key == session.id">
<div *ngIf="application.value != session.capacity; else oldsession;">
<div class="d-inline date">
<svg style="margin-right: 5px;" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-month" fill="#3366ff" xmlns="http://www.w3.org/2000/svg">
<path d="M2.56 11.332L3.1 9.73h1.984l.54 1.602h.718L4.444 6h-.696L1.85 11.332h.71zm1.544-4.527L4.9 9.18H3.284l.8-2.375h.02zm5.746.422h-.676V9.77c0 .652-.414 1.023-1.004 1.023-.539 0-.98-.246-.98-1.012V7.227h-.676v2.746c0 .941.606 1.425 1.453 1.425.656 0 1.043-.28 1.188-.605h.027v.539h.668V7.227zm2.258 5.046c-.563 0-.91-.304-.985-.636h-.687c.094.683.625 1.199 1.668 1.199.93 0 1.746-.527 1.746-1.578V7.227h-.649v.578h-.019c-.191-.348-.637-.64-1.195-.64-.965 0-1.64.679-1.64 1.886v.34c0 1.23.683 1.902 1.64 1.902.558 0 1.008-.293 1.172-.648h.02v.605c0 .645-.423 1.023-1.071 1.023zm.008-4.53c.648 0 1.062.527 1.062 1.359v.253c0 .848-.39 1.364-1.062 1.364-.692 0-1.098-.512-1.098-1.364v-.253c0-.868.406-1.36 1.098-1.36z"/>
<path fill-rule="evenodd" d="M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1zm1-3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z"/>
<path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z"/>
</svg>
{{session.startDate | date:'MMM dd, yyyy'}}
<svg  width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right-short" fill="#3366ff" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.146 4.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.793 8 8.146 5.354a.5.5 0 0 1 0-.708z"/>
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5H11a.5.5 0 0 1 0 1H4.5A.5.5 0 0 1 4 8z"/>
</svg>
{{session.endDate | date:'MMM dd, yyyy'}}
</div>
<div *ngIf="session.capacity != 0" style="margin-left: 10px;" class="d-inline capacity">
<svg style="margin-right: 5px;" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-lines-fill" fill="#3366ff" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7 1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm2 9a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
</svg>
<div class="d-inline" *ngFor="let application of sessionsApplications">
<div class="d-inline"  *ngIf="application.key == session.id">
{{application.value}} / {{session.capacity}}
</div>
</div>

</div>
<div class="d-inline float-right" *ngIf="user.id != courseOwner.id">
<button nbButton status="primary">Join</button>
</div>
<div class="d-inline float-right" style="margin-left: 10px;" (click)='edit_session_model(session.id)'  *ngIf="user.id == courseOwner.id">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="#3366ff" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z"/>
<path fill-rule="evenodd" d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z"/>
</svg>
</div>
<div class="d-inline float-right" *ngIf="user.id == courseOwner.id">
<a [routerLink]="['/pages/session', session.id]"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-sliders" fill="#3366ff" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 3.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zM11.5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM7 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zM4.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm9.5 3.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zM11.5 15a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
<path fill-rule="evenodd" d="M9.5 4H0V3h9.5v1zM16 4h-2.5V3H16v1zM9.5 14H0v-1h9.5v1zm6.5 0h-2.5v-1H16v1zM6.5 9H16V8H6.5v1zM0 9h2.5V8H0v1z"/>
</svg></a>
</div>
</div>                                        
</div>
</div>
</ng-container> 
<ng-template #oldsession >
<div class="d-inline date">
<svg style="margin-right: 5px;" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-month" fill="#333" xmlns="http://www.w3.org/2000/svg">
<path d="M2.56 11.332L3.1 9.73h1.984l.54 1.602h.718L4.444 6h-.696L1.85 11.332h.71zm1.544-4.527L4.9 9.18H3.284l.8-2.375h.02zm5.746.422h-.676V9.77c0 .652-.414 1.023-1.004 1.023-.539 0-.98-.246-.98-1.012V7.227h-.676v2.746c0 .941.606 1.425 1.453 1.425.656 0 1.043-.28 1.188-.605h.027v.539h.668V7.227zm2.258 5.046c-.563 0-.91-.304-.985-.636h-.687c.094.683.625 1.199 1.668 1.199.93 0 1.746-.527 1.746-1.578V7.227h-.649v.578h-.019c-.191-.348-.637-.64-1.195-.64-.965 0-1.64.679-1.64 1.886v.34c0 1.23.683 1.902 1.64 1.902.558 0 1.008-.293 1.172-.648h.02v.605c0 .645-.423 1.023-1.071 1.023zm.008-4.53c.648 0 1.062.527 1.062 1.359v.253c0 .848-.39 1.364-1.062 1.364-.692 0-1.098-.512-1.098-1.364v-.253c0-.868.406-1.36 1.098-1.36z"/>
<path fill-rule="evenodd" d="M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1zm1-3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z"/>
<path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z"/>
</svg>
{{session.startDate | date:'MMM dd, yyyy'}}
<svg  width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right-short" fill="#333" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.146 4.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.793 8 8.146 5.354a.5.5 0 0 1 0-.708z"/>
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5H11a.5.5 0 0 1 0 1H4.5A.5.5 0 0 1 4 8z"/>
</svg>
{{session.endDate | date:'MMM dd, yyyy'}}
</div>
<div *ngIf="session.capacity != 0" style="margin-left: 10px;" class="d-inline capacity">
<svg style="margin-right: 5px;" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-lines-fill" fill="#333" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7 1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm2 9a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
</svg>
<div class="d-inline" *ngFor="let application of sessionsApplications">
<div class="d-inline"  *ngIf="application.key == session.id">
{{application.value}} / {{session.capacity}}
</div>
</div>

</div>
<div class="d-inline float-right" *ngIf="user.id != courseOwner.id">
<button nbButton disabled status="primary">Join</button>
</div>

<div class="d-inline float-right" *ngIf="user.id == courseOwner.id">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-sliders" fill="#333" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 3.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zM11.5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM7 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zM4.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm9.5 3.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zM11.5 15a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
<path fill-rule="evenodd" d="M9.5 4H0V3h9.5v1zM16 4h-2.5V3H16v1zM9.5 14H0v-1h9.5v1zm6.5 0h-2.5v-1H16v1zM6.5 9H16V8H6.5v1zM0 9h2.5V8H0v1z"/>
</svg>
</div>
</ng-template>
</nb-card-body>
</nb-card>
</div>
</ng-container>
<ng-template #nosession>
<div class="col-lg-12" style="text-align: center;">
<img width="55%" src="assets/images/empty-session.png">
<p class="mt-2">This course has no session!</p>
</div>
</ng-template>
</nb-card-body>
</nb-card>

我检查了控制台，它总是空的，没有错误，数据存在于数据库中，API始终处于活动状态。

**编辑：**应用本答案中提出的解决方案后，内容开始比以前出现更多，但仍然存在相同的问题，但频率较低。

Answer 1

这可能是由于您在中使用的'tasks'变量。next是一个数组，它是一个对象，是js，由ref传递。从技术上讲，它应该是。next在同一项上，这会导致主题不会触发其观察者。

尝试以下方法：(从现有数组中传递新对象的不同方法(

this.taskSubject$.next(new Array(this.tasks))
this.taskSubject$.next([...this.tasks])
this.taskSubject$.next(this.tasks.slice(0))

：

this.taskService.getByCourseId(this.course.id).subscribe(
data => {
this.tasks = data;
this.taskssubject$.next(this.tasks); <<< ----- this.tasks is an array
}
);

Answer 2

这是因为您在依赖sessions.length > 0; else nosession中显示nosession。您的sessions参数从类内部更改，更改检测器不处理它。使sessions可观察或使用直接的更改检测器控件。