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

我有一个问题,我正在尝试将playlist[]数组从 component.ts传递给 header.ts。


ERROR TypeError: Cannot read property 'length' of undefined


下面的代码:


组件.ts


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) { }



  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();

  }

阿晨1998
浏览 198回答 2
2回答

撒科打诨

你的问题是里面的对象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({&nbsp; selector: 'app-content',&nbsp; templateUrl: './content.component.html',&nbsp; styleUrls: ['./content.component.scss']})export class ContentComponent {&nbsp; public data = [];&nbsp; public playlist = [];&nbsp; public apiData: any;&nbsp; public results = [];&nbsp; public loading = false;&nbsp; public noData: any;&nbsp; p: number = 1;&nbsp; faSearch = faSearch;&nbsp; faRedo = faRedo;&nbsp; faHeadphones = faHeadphones;&nbsp; faExternalLinkAlt = faExternalLinkAlt;&nbsp; faPlus = faPlus;&nbsp; searchQuery: string = "";&nbsp; clickMessage = '';&nbsp; constructor(private service: ApiService) { }&nbsp;...&nbsp; addSongToPlaylist(itunes) {&nbsp; &nbsp; const playlistSong = {...this.playlist};&nbsp; &nbsp; playlistSong.push(itunes);&nbsp; &nbsp; this.playlist = playlistSong;&nbsp; &nbsp; console.log('Playlist - ', this.playlist);&nbsp; }&nbsp;...}

呼如林

您需要从组件输出播放列表,然后将其分配给页面组件中的变量,然后可以将其传递给应用程序标题:<app-header [playlist]="playlist"></app-header><app-content [playlistOutputEvent]="playlist = $event;"></app-content>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript