Наблюдаемый, имеющий наблюдаемый член в шаблоне

Ваш метод получения get translationsAsArray$() возвращает новый объект Observable каждый раз, когда он вызывается. Канал Angular async видит новую ссылку на объект, поэтому он подписывается на новую наблюдаемую.

get observableObj() {
  // Returns a new object each time
  return timer(50);
}

constructor() {
  console.log('Testing Observable reference equality');
  const obj1 = this.observableObj;
  const obj2 = this.observableObj;
  console.log('Different Object references?', obj1 !== obj2); // true
}

Вы должны убедиться, что ссылка на наблюдаемый объект остается прежней.

Для этого измените геттер на обычное свойство объекта:

book.translationsAsArray$ = timer(50).pipe(
  tap(time => console.log('translationsAsArray subscribed')),
  map(time => ['abc'])
)

Если translationsAsArray$ должен быть геттером, вы должны кэшировать возвращаемый объект, чтобы вы могли не возвращайте новую ссылку на объект каждый раз.

Демонстрация StackBlitz.

Один из способов предотвратить это - создать объект переменной шаблона со всеми наблюдаемыми в качестве свойств и использовать его для управления шаблоном:

<div *ngIf="{ book: (book$ | async), translations: (term.translationsAsArray$ | async) } as asyncs"
  <div *ngIf="asyncs.book">
    <dl>
      <div *ngIf="asyncs.translations">
        <dt><b class="text-muted">TRANSLATIONS</b></dt>
        <dd>
          <ul class="list-unstyled">
            <li *ngFor="let translation of asyncs.translations">
              <a routerLink="/books/{{translation.rid}}">{{translation.title}}</a> ({{translation.languageAsString}})
            </li>
          </ul>
        </dd>
      </div>
    </dl>
  </div>
</div>