Угловое наблюдаемое поведение нечетное при совместном использовании

Вы должны использовать общий () оператор, так как вы подписались дважды, вот почему вы получили дубликат. Вы должны изменить свой html-код соответственно:

 <tbody *ngIf="familyMembers | async as familyProps">
        <pre> {{familyProps | json}}</pre> 

В первом * ngЕсли вы проверяете наличие значений, поэтому нет необходимости использовать асинхронный канал снова в другой строке, так как он выиграл ' t, если он не прошел первый. Кроме того, когда вы вызываете «as familyProps» и используете его в следующей строке, вы уверены, что этот локальный объект будет доступен, когда эта строка будет выполнена. Он может работать без «как», но из вашего комментария я просто добавляю его, чтобы убедиться.

- EDIT. Каждый асинхронный канал, который вы вызываете, тоже будет подписаться, теперь случается, что первая строка с * ngIf ожидая значений, а вторая строка находится внутри этой оболочки, поэтому она не будет вызывать до тех пор, пока не будет выполнена первая строка. Теперь, когда первая строка проходит, вторая строка будет пытаться подписаться с асинхронным каналом, но уже завершена, из-за подписки на первую строку и на общий () оператор. Вы можете попробовать это, и оно должно работать также:

<tbody *ngIf="familyMembers | async">
  <pre> {{familyMembers | json}} </pre>