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>

Answer 2

在您的父组件中

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

在您的孩子伴侣中

@Input() masterArray : any;

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

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

2 个答案: