Estoy tratando de iterar sobre una matriz de objetos de audio (contiene 3 cadenas) y pasar el audio en cada iteración a un componente secundario.
aplicación.componente.ts
ngOnInit(){ this.audios = new Array<SoundBoardAudio>(); this.audios.push(new SoundBoardAudio('Western','La canción del Sheriff.','western.mp3')); this.audios.push(new SoundBoardAudio('Olvidelo Amigo','Busquese otro tonto amigo.','olvidelo_amigo.mp3')); }aplicación.componente.html
<div class="container"> <app-soundcard *ngFor="let audio of audios" soundBoardAudio=audio></app-soundcard> </div>soundboard.component.ts
export class SoundcardComponent implements OnInit { audio:any; constructor() {} @Input() soundBoardAudio; ngOnInit() { console.log(this.soundBoardAudio); let audioSrc = 'assets/audio/'+this.soundBoardAudio.filename; this.audio = new Audio(audioSrc); } ...caja de resonancia.componente.html
<div class="card" > <div class="card-block"> <h2 class="card-title">{{soundBoardAudio.name}}</h2> <p>{{soundBoardAudio.desc}} </div> </div> ...Pero cuando trato de leer el audio del componente secundario, obtengo un valor indefinido. Si solo paso una cadena en lugar de un objeto, funciona bien.
Su sintaxis de entrada no es correcta dentro del html principal. Hazlo así:
<div class="container"> <app-soundcard *ngFor="let audio of audios" [soundBoardAudio]="audio"/> </div>En su componente principal
<div *ngFor="let pollData of PollList ; let i index" > <app-pollinfo [masterArray]="i"></app-pollinfo> </div>en su componente hijo
@Input() masterArray : any;use esto y pase el índice, luego obtendrá datos como objeto.