Элемент списка угловых материалов не работает с асинхронным каналом, который содержит delay ()

Question

У меня есть mat-nav-list, который выглядит следующим образом:

<mat-nav-list>
    <mat-list-item *ngFor="let draft of drafts$() | async">
        <ng-container *ngIf="getImageUrl$(draft) | async as imageUrl">
            <img matListAvatar [src]="imageUrl">
        </ng-container>
        <h1 matLine>{{draft.name}}</h1>
        <p matLine>{{draft.description}}</p>
    </mat-list-item>
</mat-nav-list>

Почему <img matListAvatar [src]="imageUrl"> не будет отображать изображение, когда getImageUrl$(draft) содержит pipe(delay())?Я использую задержку для имитации фактического асинхронного вызова службы.

Вы можете попробовать демонстрацию stackblitz здесь .Настройте демо, чтобы увидеть ожидаемое поведение без delay().

Это поведение / ошибка async pipe или mat-list-item или проблема с моим кодом?