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中提出的解决方案之后，内容开始比以前出现更多，但仍然存在相同的问题，但频率降低了。
答案 0 :(得分：3)
可能是由于您在.next中使用的“ tasks”变量是一个数组，该对象是js并由ref传递。从技术上讲，它将是.nexting相同的项目，并导致主题不会为其观察者触发。
尝试类似的方法：（从现有数组传递新对象的不同方法）
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
}
);
答案 1 :(得分：0)
这是因为您显示nosession依赖于sessions.length > 0; else nosession。您的sessions参数是在类内部进行更改的，并且“更改检测器”不会对其进行处理。使sessions可见，或直接使用变更检测器控件。