将 object 从 rest api 推入数组 ZC31C335EF37283C451B18BA0DD317DEZ

Question

In my Angular application, I am calling a rest-api which brings back results from the iTunes api. What I want to do is, be able to have an add button which lets me add the object(Song object) into an array, so that the user can create their own playlist. How would I push the object into an array from the rest api? My code so far for the Component.ts is:

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';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent {

  public data = [];
  public apiData: any;
  public loading = false;
  public noData = false;
  p: number = 1;
  faSearch = faSearch;
  faRedo = faRedo;
  faHeadphones = faHeadphones;
  faExternalLinkAlt = faExternalLinkAlt;
  searchQuery : string = "";

  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 = true;
      }
    })
  }

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

  }
}

Answer 1

If in the component's.ts file, you have the results of your query in the variable songs (which is what this.data seems to be), in the component's.html you can

<ng-container *ngFor="let song of songs">
    <button type="button" (click)="addSongToPlaylist(song)">Add Song {{ song.name }}</button>
</ng-container>

then back in the.ts file

addSongToPlaylist(song) {
    this.playlist.push(song);
}

Answer 2

please correct me if i am wrong, as per my understanding you want to add queried result from rest API into existing song array which is data. you can use power of spread operator here is example.

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