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

你問這個問題很好，我的三個民族的項目也在努力解決這個問題。 我們發現有兩種方法。 我將展示的是兩種做出打字稿的方法。

解決方案 因為它是對象，它需要標識符。 首先是

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

很好，很容易回顧，但我們的團隊花了很長時間來解決這些問題。