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

Question

我有一个使用Typescript 的Angular 2 应用程序，但我是新手，我有一个带有“删除”按钮的表格，

我可以将对象数据传递给我的确认模式，但是当我“确认”它时，它仍然在我的表格中。

删除-modal.component

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';
        }
    }
}

HTML

<button md-icon-button (click)="deleteTest()" name="deleteTestDetails">
    <md-icon>delete forever</md-icon>
</button>

所有其他HTML 位于主component 中，并使用“删除”按钮，如下所示

<app-test-main-page-delete-button [test]="test"></app-test-main-page-delete-button>

当用户点击确认按钮时调用'deleteTest'方法。

我还在上面列出了我在IF 中尝试过的一些方法，但它们总是会回来

...不是函数

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 还尝试了 typescript 中的接口。你可以在这里看到他们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 的常见 typescript 行为，所以我们希望在有更多时间使用它们时能更习惯它们！

Answer 2

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

你的父 html 必须像这样调用子：

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

添加dataTable作为类变量并实现输出功能：

resetData() { this.dataTable=[] }

然后在 children 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); 
}

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

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

Answer 3

我正在参与一个项目，我们的团队为此苦苦挣扎了一段时间。

首先我要说的是，Angular 并没有让这成为一件容易的事，所以我们将尝试忽略框架并编写纯 Java 来让我们自己的生活更轻松。

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

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

HTML/Java

<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);
}

回想起来很轻松，但我们的三人组花了很长时间才弄明白。