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

Question

我有一个使用 Typescript 的 Angular 2 应用程序，但我是新手，我有一个 table 和一个 'Delete' 按钮，

我可以将对象数据传递到我的确认模式，但是当我 'Confirm' 它时，它仍然在我的 table。

删除-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 中，'Delete' 按钮使用如下所示

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

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

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

... is not a function

Answer 1

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

您的 parent html 必须像这样调用 children :

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

添加dataTable作为class变量并实现输出函数:

resetData() { this.dataTable=[] }

然后在childrenhtml留下你的代码（你可以用这个修改）

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

最后在您的 children ts 文件中为每个更改设置您的数据 object，并实现您的输入功能

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

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

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

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

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

Answer 2

你问这个问题很好，我的三个人的项目也在纠结这个问题。我们发现有两种方法。我将展示的是执行 typescriptdelete 的两种方法。

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

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.

如果以上不能满足您的需求，我们的主题还尝试了 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 的常见打字稿行为，因此我们希望在有更多时间使用它们时能够更加习惯它们！

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

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

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

Angular 2/Typescript Delete Object On Button Click

javascript

typescript

angular2-directives

angular