ngFor에서 구성 요소 입력으로 객체를 전달하는 방법

Question

Audio 객체 (3 개의 문자열 포함)의 배열을 반복하고 각 반복에서 오디오를 자식 구성 요소로 전달하려고합니다.

app.component.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')); 
    } 

app.component.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); 
    } 
... 

soundboard.component.html

<div class="card" > 
    <div class="card-block"> 
    <h2 class="card-title">{{soundBoardAudio.name}}</h2> 
    <p>{{soundBoardAudio.desc}} 
    </div> 
... 

그러나 자식 구성 요소에서 오디오를 읽으려고하면 정의되지 않은 값이 나타납니다. 객체 대신 문자열 만 전달하면 괜찮습니다.

Answer 1

상위 HTML에서 입력 구문이 올바르지 않습니다. 다음과 같이하십시오 :

<div class="container"> 
    <app-soundcard *ngFor="let audio of audios" [soundBoardAudio]="audio"></app-soundcard> 
</div>