在组件之间传递数据不起作用 Angular

Question

我有一个问题，我正在尝试将playlist[]数组从 component.ts传递给 header.ts。ERROR TypeError: Cannot read property 'length' of undefined下面的代码：组件.tsimport { Component, OnInit } from '@angular/core';import { ApiService } from '../../../services/api.service';import { FormGroup, FormControl } from '@angular/forms';import { FormBuilder } from '@angular/forms';import { faSearch } from '@fortawesome/free-solid-svg-icons';import { faRedo } from '@fortawesome/free-solid-svg-icons';import { faHeadphones } from '@fortawesome/free-solid-svg-icons';import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';import { faPlus } from '@fortawesome/free-solid-svg-icons';@Component({  selector: 'app-content',  templateUrl: './content.component.html',  styleUrls: ['./content.component.scss']})export class ContentComponent {  public data = [];  public playlist = [];  public apiData: any;  public results = [];  public loading = false;  public noData: any;  p: number = 1;  faSearch = faSearch;  faRedo = faRedo;  faHeadphones = faHeadphones;  faExternalLinkAlt = faExternalLinkAlt;  faPlus = faPlus;  searchQuery: string = "";  clickMessage = '';  constructor(private service: ApiService) { }  getAll() {    this.service.getAll(this.searchQuery).subscribe((results) => {      this.loading = true;      console.log('Data is received - Result - ', results);      this.data = results.results;      this.loading = false;      if (this.data.length <= 0) {        this.noData = true;      } else if (this.data.length >= 1) {        this.noData = false;      } else {        this.noData = false;      }    })  }  closeAlert() {    this.noData = false;  }  addSongToPlaylist(itunes) {    this.playlist.push(itunes);    console.log('Playlist - ', this.playlist);}  refresh(): void {    window.location.reload();  }

Answer 1

你的问题是里面的对象playlist和开始的一样。尝试克隆对象并将新项目添加到克隆项目中：

import { Component, OnInit } from '@angular/core';

import { ApiService } from '../../../services/api.service';

import { FormGroup, FormControl } from '@angular/forms';

import { FormBuilder } from '@angular/forms';

import { faSearch } from '@fortawesome/free-solid-svg-icons';

import { faRedo } from '@fortawesome/free-solid-svg-icons';

import { faHeadphones } from '@fortawesome/free-solid-svg-icons';

import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';

import { faPlus } from '@fortawesome/free-solid-svg-icons';

@Component({

  selector: 'app-content',

  templateUrl: './content.component.html',

  styleUrls: ['./content.component.scss']

})

export class ContentComponent {

  public data = [];

  public playlist = [];

  public apiData: any;

  public results = [];

  public loading = false;

  public noData: any;

  p: number = 1;

  faSearch = faSearch;

  faRedo = faRedo;

  faHeadphones = faHeadphones;

  faExternalLinkAlt = faExternalLinkAlt;

  faPlus = faPlus;

  searchQuery: string = "";

  clickMessage = '';

  constructor(private service: ApiService) { }

 ...

  addSongToPlaylist(itunes) {

    const playlistSong = {...this.playlist};

    playlistSong.push(itunes);

    this.playlist = playlistSong;

    console.log('Playlist - ', this.playlist);

  }

 ...

}

Answer 2

您需要从组件输出播放列表，然后将其分配给页面组件中的变量，然后可以将其传递给应用程序标题：

<app-header [playlist]="playlist"></app-header>

<app-content [playlistOutputEvent]="playlist = $event;"></app-content>