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>