Неопределенные интерфейсы при передаче в шаблон Angular8

Question

Я новичок в Angular8.
Я разрабатываю шаблон, который передает интерфейс другому субмикро-шаблону и отображает его.
Шаблон основного компонента:

<evt-bibliography-item *ngFor="let biblCit of biblCits" 
                         biblField="{{ biblCit }}">
</evt-bibliography-item>

biblCits это просто массив интерфейсов получено получено с:

// main component ts.
this.bps.getBibliographicCitations().subscribe(response => {
      this.biblCits = response.citations;

Пока все ок. Проблема возникает при чтении одного интерфейса из подкомпонента, который учитывает все элементы массива undefined.
Это файл ts:

import { Component, Input } from '@angular/core';
import { BibliographicCitation } from 'src/app/services/xml-parsers/bibliography-parser.service';

@Component({
  selector: 'evt-bibliography-item',
  templateUrl: './bibliography-item.component.html',
  styleUrls: ['./bibliography-item.component.scss']
})
export class BibliographyItemComponent {
  @Input() biblField: BibliographicCitation;

  constructor() {
    console.log(this.biblField)         // [Object Object]
    console.log(this.biblField.titles); // undefined
  }
}

Под-шаблон:

<p *ngFor="let biblEl of biblField | keyvalue">
  <em class="biblCitation">
    {{ biblEl.value }}
  </em>
</p>

Среди уловок я также безуспешно пробовал ngAfterViewInit и setInterval.
Я не могу понять, почему элементы не определены.
Надеюсь, ничего серьезного.

Answer 1

Вы не должны использовать интерполяцию строк ({{}}) при привязке объекта к @Input, в противном случае он просто вызовет функцию toString() для объекта и свяжет это с входом. Вы должны использовать квадратные скобки ([]) для этого. Проверьте шпаргалку для получения дополнительных примеров:

<evt-bibliography-item *ngFor="let biblCit of biblCits" 
                     [biblField]="biblCit">
</evt-bibliography-item>

Входное значение будет доступно в вашем компоненте в хуке ngOnInit:

ngOnInit() {
  console.log(this.biblField);
  console.log(this.biblField.titles);
}

ngOnInit - это ловушка жизненного цикла, которая вызывается после того, как Angular инициализирует все связанные с данными свойства директивы

Answer 2

Полагаю, вам нужны квадратные скобки, а не фигурные скобки вокруг biblField в шаблоне html. Попробуйте это:

<evt-bibliography-item *ngFor="let biblCit of biblCits" 
                         [biblField]="biblCit">
</evt-bibliography-item>