self.context.delete 不是 angular2 中的函数

Question

我正在使用 ng-bootstrap 作为模式，我试图从 table 中删除一条记录，我有一个 DeletemodalComponent 和一个 EmployeeComponent。

DeletemodlalComponent

import {Component,OnInit, Input} from '@angular/core';
import { NgbModal, ModalDismissReasons, NgbModalRef, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-deletemodal',
  templateUrl: './deletemodal.html',
  styleUrls: ['./deletemodal.component.css']
})
export class DeletemodalComponent implements OnInit {
  @Input() name;
  closeResult:string; 
  constructor(
    private modalService: NgbModal,
    ) { }

  ngOnInit() {
    //const modalRef = this.modalService.open(DeletemodalComponent);
  }
}

员工组件

import { Component,Inject, OnInit,AfterViewInit,ViewChild } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Rx';
import { DataTableDirective } from 'angular-datatables';
import { NgbModal, ModalDismissReasons, NgbModalRef, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
import { DeletemodalComponent } from 'app/deletemodal/deletemodal.component';
import { EmployeeService } from 'app/services/employee.service';
import { Employee} from "app/services/employee";
@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css'],
})

export class EmployeesComponent implements OnInit {
 @ViewChild(DataTableDirective)
  public datatableElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();
  employees: Employee[] = [];
  errMesg: any; 
  public emp_data:any;
  closeResult: string;
  public markersData: any;
  name:string;
  id:number;
  modalTitle:string;
  modalRef: NgbModalRef;

  constructor(@Inject(Http)
    private route: ActivatedRoute,
    private router: Router,
    private http:Http,
    private employeeservice:EmployeeService,
    private modalService: NgbModal
    //private modal: NgbModal,
    ) { }

   ngOnInit(): void {
       this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5
    };
    this.getEmployees();
  }

  /* Options for Modal */
  modalOptions : NgbModalOptions = {
    size:'lg'
  };

  getEmployees(){
    this.http.get('http://127.0.0.1:8000/api/employee')
      .map(res => res.json())
      .subscribe(
        employees => {
        this.employees = employees;
        this.dtTrigger.next();
         console.log(employees);
      });
  }
   rerender(): void {
    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.destroy();
      this.employees;
    });
  }

delete(id) {
    console.log(id); 
    //delete employee code
  }

  open(content,employee) {
    const modalRef = this.modalService.open(DeletemodalComponent);
    modalRef.componentInstance.id = employee.id;
  }
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

我在 EmployeeComponent

中导入了 DeletemodalComponent

<button type="button" class="btn btn-primary" (click)="delete(id)">Delete</button>

此行在 deletemodal.html 中，并在 EmployeeComponent 中调用删除函数。我认为 DeletemodalComponent 没有 delete()，这就是它给出此错误的原因，有没有办法从 DeletemodalComponent 调用 EmployeeComponent 的 delete()模板 ?

有人可以帮忙吗？

Answer 1

如yurzui所说，使用@Output。我也会稍微将 delete 更改为 deleteEmployee。因此，在您的模态组件中，添加以下内容：

@Output() deleteEmployee = new EventEmitter<number>();

点击事件将是您传递 id 的地方：

(click)="deleteEmployee.emit(id)"

并在您的父级 EmployeeComponent 中，在子标签中添加以下内容：

<app-deletemodal (deleteEmployee)="deleteEmployee($event)"></app-deletemodal>

现在在 deleteEmployee 你有 id:

deleteEmployee(id) {
  console.log(id) // id here now in parent comp
}

更多关于 @Output 和来自 official docs 的其他互动方式。

self.context.delete 不是 angular2 中的函数

self.context.delete is not a function in angular2

typescript

ng-bootstrap

angular