от (обещания) наблюдаемой карты до более глубокого поля, которое является массивом и используется в html, angular

Question

Я следил за этим видео на YouTube о содержательном для angular, https://www.youtube.com/watch?v=2agJoqviGY4&t=341s

Он использует <section *ngIf="landingContent$ | async as content"> в шаблоне html, я хотел бы go глубже в переменной Landing Content $, чтобы быть похожим на <section *ngIf="landingContent$.landingTemplate.content[0].data.target.fields | async as content">, но это выдает ошибки.

Компонент:

export class HeroHeaderComponent implements OnInit {
  landingContent$: Observable<any>;
  constructor(public contentful: ContentfulService) {}    
ngOnInit() {
        this.landingContent$ = this.contentful.getContent("xxx");
      }

Служба:

getContent(contentId) {
    const promise = this.client.getEntry(contentId);
    return from(promise).pipe(
      map((entry) => entry.fields.landingTemplate.content[0].data.target.fields)
    );
  } 

Здесь, в Служба, я получаю сообщение об ошибке TS, говоря: "Property 'landingTemplate' does not exist on type 'unknown'.ts" Однако, если я просто использую map((entry) => entry.fields, я не получаю ошибок, но затем не могу найти путь к go глубже, чтобы получить landingContent$ к чему-то вроде landingContent$.landingTemplate.content[0].data.target.fields в другом месте. Я сделал хак ie исправление, где я подписываюсь на компонент и создаю переменную, которая затем возвращает это поле, но я бы хотел использовать элегантный метод | async as content в html, если это возможно.

Html:

<section class="why" id="section-why" *ngIf="landingContent$ | async as content">
  <div class="layout-grid">
    <h2 class="title">{{ content.heading }}</h2>

Answer 1

Если типизации TypeScript просто не подходят для содержательного контента, и эти свойства действительно существуют во время выполнения, вы всегда можете использовать Rx JS pluck() для детализации в вашем сервисе.

getContent(contentId) {
    return from(this.client.getEntry(contentId)).pipe(
      pluck('fields', 'landingTemplate', 'content[0]', 'data', 'target', 'fields')
    );
  } 

https://www.learnrxjs.io/learn-rxjs/operators/transformation/pluck