在組件之間傳遞數據不起作用 Angular

Question

我有一個問題，我正在嘗試將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();
  }

  Search() {
    this.service.getAll(this.searchQuery).subscribe((results) => {
      this.loading = true;
      console.log('Data is received - Result - ', results);
      this.data = results.results;
      this.loading = false;
    })
  }
  ngOnInit() {

  }
}

組件.html

<table class="table">
          <thead class="thead-light">
            <tr>
              <th>Artwork</th>
              <th>Artist</th>
              <th>Title</th>
              <th>Genre</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let user of playlist">
              <td><img src="{{user.artworkUrl60}}"></td>
              <td>{{user.artistName}}</td>
              <td>{{user.collectionName}}</td>
              <td>{{user.primaryGenreName}}</td>
              <td>{{user.collectionPrice}}</td>
            </tr>
          </tbody>
        </table>

頁.html

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

header.ts

import { Component, OnInit, Input } from '@angular/core';
import { faHeadphones} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  faHeadphones = faHeadphones;

  @Input()playlist = [];

  constructor() { }

  ngOnInit() {
  }

}

header.html

<li class="nav-item">
            <a class="nav-link" href="#">{{playlist.length}}</a>
</li>

Answer 1

您的問題是playlist中的 object 與開頭相同。 嘗試克隆 object 並將新項目添加到克隆項目：

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

您需要從組件中獲取 output 播放列表，然后將其分配到頁面組件中的變量中，然后可以將其傳遞給應用程序 header：

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