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

Question

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

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

删除-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

你问这个问题很好，我的三个人的项目也在为此苦苦挣扎。我们发现是两种方式。我将展示的是两种做 typescriptdelete 的方法。

解决方案 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 的常见打字稿行为，因此我们希望在有更多时间使用它们时能够更加习惯它们！