3-2点击删除

父组件

<div class="app" >
    <app-item *ngFor="let item of list" [data]="item" (click)="handledel(item.id)">
    </app-item>
</div>

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http'
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  public list:any;
  constructor(public http:HttpClient) { }
  ngOnInit() {
    var url:string = "http://192.168.14.15:5000/top/playlist?cat=华语";
    this.http.get(url).subscribe(res=>{
      this.list = res["playlists"];
    })
  }
  handledel(id){
    var sub = this.list.filter(item=>item.id!==id)
    this.list = sub
  }
}

子组件

<div class="item">
    <img [src]="data.coverImgUrl">
    <p>{{data.name}}</p>
</div>

import { Component, OnInit,Input} from '@angular/core';
@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {
  @Input() data:any
  constructor() { }
  ngOnInit() {
  }
}