在传递到模板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

当将一个对象绑定到一个{{}}时，不应该使用字符串插值( string插值)，否则它只会调用对象上的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是在角初始化了指令的所有数据绑定属性之后调用的生命周期挂钩。

Answer 2

我相信在html模板中，您需要方括号和biblField周围没有大括号。试试这个：

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