多个通配符Angular ng-content投影仅渲染最后一个

Question

父组件（app.component.html）：

SELECT *
FROM traffic
WHERE arriving_date > '30.06.2019'

子组件（course-card.component.html）：

<course-card (courseSelected)="onCourseSelected($event)" [course]="course">
   <div class="course-image">
       <img width="300" alt="Angular Logo" [src]="course.iconUrl">
       <h5>Total Lessons: 5</h5>
   </div>

   <div class="course-description">{{ course?.longDescription }}</div>
      Edit Description: <textarea></textarea>
</course-card>

运行上面的示例时，子组件中的两个通配符<ng-content></ng-content> <ng-content select=".course-image"></ng-content> <ng-content select=".course-description"></ng-content> <ng-content></ng-content> （第一个和最后一个）中，仅投影了最后一个，而不投影第一个。为什么两个或第一个都不被投影而只有最后一个被投影？