Question

如何删除Angular 2+中的项目？我是Angular的新手，我对此感到困惑。希望你们能帮忙。我顺便做了添加项目，但我不知道如何删除项目。我在下面使用三个文件。 1. cribs.service.ts，2。crib-card-components.ts和3. crib-card-component.html。

// cribs.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Subject } from 'rxjs/Subject'
import 'rxjs/add/operator/map';

@Injectable()
export class CribsService {

  public newCribSubject = new Subject<any>();

  constructor(private http: Http) { }

  getAllCribs() {
    return this.http.get('data/cribs.json').map(res => res.json())
  }

  addCrib(data){
      data.image = 'default-crib';
      this.newCribSubject.next(data);
  }
}

//婴儿床卡component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Crib } from './../crib';

@Component({
  selector: 'app-crib-card',
  templateUrl: './crib-card.component.html',
  styleUrls: ['./crib-card.component.css']
})
export class CribCardComponent implements OnInit {

  @Input('crib') crib: Crib;

  constructor() { }

  ngOnInit() {

  }

}

//婴儿床card.component.html

<div class="thumbnail">
<img src="assets/images/{{ crib.image }}.jpg" alt=""> 

<div class="caption">
   <div *ngIf="!crib.showDetails">
      <h4>
        <span class="label label-primary">
           {{ crib.type }}
        </span>
      </h4>
      <h3>
        <i class="glyphicon glyphicon-tag"></i>
        {{ crib.price | currency: 'USD':true }}
      </h3>
      <h4>
        <i class="glyphicon glyphicon-home"></i>
        {{ crib.address }}
      </h4>

      <hr>

      <button
        class="btn btn-sm btn-success"
        *ngIf="!crib.showDetails"
        (click)="crib.showDetails = !crib.showDetails">
        Details
      </button>

      <button
        class="btn btn-sm btn-danger"
        (click)="removeItem(crib)">
        Delete
      </button>
    </div>

    <div *ngIf="crib.showDetails">
       <div class="details">
          <h4>
            <span class="label label-primary">
               Beds: {{ crib.bedrooms }}
            </span>
            <span class="label label-primary">
               Baths: {{ crib.bathrooms }}
            </span>
            <span class="label label-primary">
               SqFt: {{ crib.area }}
            </span>
          </h4>

          <p>{{ crib.description }}</p>

          <hr>

          <button
            class="btn btn-sm btn-danger"
            (click)="crib.showDetails = !crib.showDetails">
            Close
          </button>
        </div>
      </div>
   </div>
</div>

Answer 1

你有没有试过这个？

<强> //婴儿床卡component.ts

    confirmdeleteitem(deleteitemdata) {     

          this._Service.deleteitem(deleteitemdata).subscribe(data => {
                let status = data.status;            
          });
    }

<强> // cribs.service.ts

     deleteitem(ParamsValue:any) {

            let headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');
            headers.append('Access-Control-Allow-Methods', 'GET,PUT,POST,OPTIONS');
            headers.append('Access-Control-Allow-Origin', '*');
            var params = ParamsValue;

            return this.http.post(APIURL, params, {
                headers: headers
            }).map(this.extractData);       
    }

   private extractData(res: Response) {
        let Response = res.json();
        return Response || {};
    }

Answer 2

你在做什么只是发出你从服务中获得的值，而不是存储它们，这意味着一旦它被发出=>呈现

通常，这样做的方法是发出=＆gt; stored =＆gt;呈现

所以我会做什么。

第一个商店在我的页面组件

中

cribList: Array<Crib> = getAllCribs().flatMap((cribs: Array<Crib>) => cribs)

//在这里我们等待getAllCribs（），然后我们将传入的婴儿床存储到列表中。

第二次渲染：我们可以遍历CribList并为每个婴儿床渲染一个组件。

<div class="crib-list">
  <app-crib-item *ngFor="let crib of cribList" [crib]="crib"></app-crib-item>
</div>

非常好。

第3次添加删除事件 我们想要删除仅限Crib的本地而不是服务器页面组件（具有婴儿床列表）可以创建一个方法来处理，单击删除按钮上的事件。 e.x

    <div class="crib-list">
      <app-crib-item (click)="removeCrib(crib)" *ngFor="let crib of cribList" [crib]="crib"></app-crib-item>
    </div>

第4次处理删除事件 //在PageComponent

上

removeCrib(crib: Crib) {
  this.cribList.filter(item => item.id != crib.id) //assuming that id exists on Crib Model
}

在Angular 2中删除项目

2 个答案: