Question

我有一个使用Angular 2的{{1}}应用，但我是新手，我所拥有的是一张带有删除＆＃39;的表格。按钮，

我可以将对象数据传递给我的确认模式，但是当我确认＆＃39;它，它还在我的桌子里。

删除-modal.component

Typescript

HTML

import { Component, OnInit, Inject, Input } from '@angular/core';
import { TestService } from '../../ABC/TestService/TestService.service';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';

import { testModal } from 'models/test';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.css']
})

export class testDeleteModalComponent implements OnInit {
    @Input('test') test: testModal;

    constructor(private TestService: TestService, private accountService: AccountService,
        @Inject(MD_DIALOG_DATA) private dialogData: any) { }

    ngOnInit() {
        console.log('test', this.dialogData.beneficiary);
        this.test = this.dialogData.test;
    }

    deleteTest() {

        if (this.dialogData.test.identifier) {
            // this.dialogData.beneficiary.splice(this.dialogData.beneficiary.indexOf(this.beneficiaryAnt), 1);
            // this.dialogData.beneficiary.splice(this.beneficiary);
            // delete this.beneficiary;
            this.dialogData.test.splice(this.dialogData.test.indexOf(this.dialogData.test), 1);
        } else {
            this.dialogData.test.operation = 'X';
        }
    }
}

所有其他<button md-icon-button (click)="deleteTest()" name="deleteTestDetails"> <md-icon>delete forever</md-icon> </button>位于主HTML中，并且“删除”＆＃39;按钮使用如下所示

component

＆＃39; deleteTest＆＃39;当用户单击确认按钮时调用方法。

我还在上面介绍了我在<app-test-main-page-delete-button [test]="test"></app-test-main-page-delete-button>尝试过的一些方法，但他们总是回来

...不是函数

Answer 1

你问这个问题很好，我的三个民族的项目也在努力解决这个问题。我们发现有两种方法。我将展示的是两种做出打字稿的方法。

解决方案a。因为它是对象，它需要标识符。首先是

var objectdelete = {
    identifier: 'Mydelte',
    value: '168%'
}

接下来我们需要的是现在的服务。有些人称他们为指令，但根据我的经验，他们是同一件事。我们有警报，因此用户知道他们是否没有设置标识符，他们必须返回。我看不到你的服务，我看到数组被删除了。如果你将数组和服务结合起来，这将适用于整个网站。

export class DeleteService

delete(objectToDelete: string) {

    if (!objectToDelete.identifier) {
       alert('No identifer');
    }else {
        // Delete from your array here.
    }
}

解决方案2.

如果上述内容没有满足您的需求，我们的tema还会尝试使用打字稿中的接口。你可以在https://www.typescriptlang.org/docs/handbook/interfaces.html

看到它们

所以它变成了

export class myDeleteService {
    deleter: IDeleter
}

export interface IDeleter {
    delete: this.delete.delete(deletE);
    deleteArray: this.array =[];
}

然后只是在你的HTML中它将是

<button (click)='delete(dieleter)'>Delete me!</button>

这些都是angular2 / 4/5的常见打字行为，所以我们希望在我们有更多时间使用它们时更习惯它们！

Answer 2

按钮点击时删除数据对象的最简单方法，并在完成后立即刷新：

你的父html必须像这样打电话给孩子：

<app-component [inputData]="dataTable" (inputDataChange)="resetData()"/>

将dataTable添加为类变量并实现输出函数：

resetData() { this.dataTable=[] }

然后在儿童html中留下您的代码（您可以使用此更改）

<button class="fa fa-delete" (click)="deleteTest()" name="deleteTestDetails">Delete</button>

最终在您的孩子的ts文件中为每次更改设置数据对象，并实现您的输入功能

myDataTable: any = [];
@Input set inputData(data: DataTable) {
   if(data) {
     this.myDataTable = data;
}}

@Output() inputDataChange: EventEmitter<any> = new EventEmitter();

deleteTest() {
   this.inputDataChange.emit(true); 
}

这段代码有什么作用？当单击删除按钮时，它将向父级发出事件和事件，然后您的父级将删除dataTable，最后，您的子级输入将刷新它，因为setter将捕获更改并刷新变量。

如果要将这些规则应用于表格更改，则只需发出dataTable并重新分配，而不是重置它。

Answer 3

我参与了一个项目，我们的团队已经在这个问题上挣扎了一段时间。

首先我要说的是，Angular并没有把这个变成一个简单的任务，所以我们将试图忽略这个框架并编写纯Java来让我们的生活更轻松。

所以看着你的按钮，我可以看到你已经开始走上正轨了。

如果按钮正在调用您的组件，如下所示

<强> HTML /爪哇

<button ng-click="delete()">Click me<button>

<强> Component.ts

function delete = deleteMethod(testIdentifier) {
    var abc = this.beneficiary.beneficiaryIdentifier.test.splice(this.beneficiary.beneficiaryIdentifier.test.indexOf(testIdentifier));
    component2.deleteFunction();
}

<强> Component2.ts

然后我们可以将我们的标识符传递给我们的父组件或子组件，并删除受益人，如下所示：

deleteMethod(deetle) {
    this.beneficiary.removeAtIndex(testIdentifier.splice(1), 1);
}

很好，很容易回头看，但我们的团队花了很长时间来解决这些问题。

Angular 2 / Typescript删除对象按钮单击

3 个答案: