1- 组件思维发送http请求cat=华语

//app/app.module.ts 根目录
import {HttpClientModule} from '@angular/common/http'；
import {MusicItemComponent} from '../components/MusicItem/MusicItem.component';
@NgModule({
  declarations: [
    ...
    MusicItemComponent
  ],
  imports: [
    ...
    HttpClientModule
  ],
})

//app/app.component.ts
import {HttpClient} from "@angular/common/http"
export class AppComponent {
  title = 'my-wang';
  public playlists:any = [];
  constructor(public http:HttpClient){}
  ngOnInit(){
    var url:string = 'http://localhost:4000/top/playlist?cat=华语';
    this.http.get(url).subscribe((res:any)=>{
      res.playlists.forEach((item:any)=>{
        item.playCount = this.handleCount(item.playCount);
      })
      this.playlists = res.playlists;
    })
  }
}

//app/app.component.html
<div class="container">
    <app-MusicItem [data]="item" *ngFor="let item of playlists"></app-MusicItem>
</div>

//components/MusicItem.component.ts
export class MusicItemComponent implements OnInit {
  @Input() data!:any;
}

//components/MusicItem.component.html
<div class="item">
  <img src={{data.coverImgUrl}} alt="">
  <p>{{data.name}}</p>
  <span>{{data.playCount}}</span>
</div>