Angular 如何在ngFor中将对象作为组件输入传递

我试图迭代音频对象数组（包含3个字符串），并将每次迭代中的音频传递给子组件

应用程序组件.ts

ngOnInit（）{
this.audios=新数组（）；
这个.audios.push（新的SoundBoardAudio（'Western'、'LaCanción del Sherriff'、'Western.mp3'）；
这个.audios.push（新的SoundBoardAudio（'Olvidelo Amigo'，'Busquese otro tonto Amigo'，'Olvidelo_Amigo.mp3'）；
}

app.component.html

音板.组件.ts

导出类SoundcardComponent实现OnInit{
音频：任何；
构造函数（）{}
@输入（）声音板音频；
恩戈尼尼特（）{
console.log（此为.soundBoardAudio）；
让audioSrc='assets/audio/'+this.soundBoardAudio.filename；
this.audio=新音频（audioSrc）；
}
...

soundboard.component.html

{{soundBoardAudio.name}
{{soundBoardAudio.desc}
...

---

但是，当我尝试从子组件读取音频时，会得到一个未定义的值。如果我只传递一个字符串而不是一个对象，它工作正常。

您的输入语法在父html中不正确。请执行以下操作：

父组件中的

<div *ngFor="let pollData of PollList ; let i index" >            
    <app-pollinfo [masterArray]="i"></app-pollinfo>
</div>

---

使用此方法并传递索引，然后您将获得作为对象的数据。

我这样做了，它解决了我的问题，即以

[object][object]

的形式传递数据，因为它将被转换为字符串（我迭代父元素并将数据传递给子组件），但是当我检查子组件时，我可以看到

ng reflect data=”[object object]

。这正常吗？我正在传递一个对象。Well

ng reflect data

仅用于调试目的。它显示组件上的所有绑定，该组件实际上是组件（类）的一部分属性的对象好的，我很欣赏这些信息。我还发现很奇怪，我必须将数据绑定到我正在迭代的同一个元素上，最初我想迭代一个

，并将数组元素传递给

（子组件）这很奇怪。唯一的解释是离子成分是通过读取父输入的方式创建的，所以不需要绑定更低的值。