Question

我正在编写一个我在其中订阅对象的应用程序。现在在html中，我有一个删除按钮，希望它删除带有索引的元素。

到目前为止，我有一个未定义的索引。我该如何解决？

这是带有订阅的组件

    timeInputs: timeInput[];
    private subscription: Subscription;
    private sub: Subscription;
    timeInputIndex: number;
    editedTimeInput: timeInput;

ngOnInit() {
        this.timeInputs = this.ttService.getTimeInputs();
        this.subscription = this.ttService.timeInputsChanged.subscribe(
            (timeInputs: timeInput[] ) => {
                this.timeInputs = timeInputs;
            }
        );
        this.sub = this.ttService.startedEditing.subscribe(
            (index: number) => {
                this.timeInputIndex = index;
                this.editedTimeInput = this.ttService.getTimeInput(index);
            }
        )
}

onDelete() {
        this.ttService.deleteTimeInput(this.timeInputIndex);
    }

service.ts

    startedEditing = new Subject<number>();

    getTimeInputs() {
        return this.timeInputs.slice();
    }

    getTimeInput(index: number) {
        return this.timeInputs[index];
    }

    deleteTimeInput(index: number) {
        this.timeInputs.splice(index, 1);
        this.timeInputsChanged.next(this.timeInputs.slice());
    }

当我尝试console.log(this.timeInputIndex);时，输出未定义，因此deleteTimeInput函数将删除第一个元素。如何更改代码，以便获得要单击的元素的索引-我想删除该元素？

编辑：这是点击侦听器的简化部分

<form class="mt-3" *ngFor="let timeInput of timeInputs">
<div class="dropdown show">
                <a
                        role="button"
                        id="dots"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                    <i class="fas fa-ellipsis-v otherIcon"></i>
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <a class="dropdown-item" (click)="onDuplicate()">Duplicate</a>
                    <a class="dropdown-item" (click)="onDelete()">Delete</a>
                </div>
            </div>
</form>

Answer 1

查看您的代码，我发现您正在使用RxJS做一些有趣的事情，特别是使用“ startedEditing”主题，但是我从未见过该主题使用.next()。我也不清楚如何知道索引是什么。

对于更狭par的方法，您可以直接将'index'值传递给onDelete（）函数。为此，请在ngFor指令中执行以下操作：

<form class="mt-3" *ngFor="let timeInput of timeInputs; i = index">

然后，当您致电删除

<a class="dropdown-item" (click)="onDelete(i)">Delete</a>

现在，在onDelete函数中，您可以访问索引

onDelete(i) {
    this.ttService.deleteTimeInput(i);
}

现在，也许答案并非您所愿，您宁愿使用RxJS解决方案。您将需要某种方式让服务使用startedEditing.next(index)发送数据，但是关于如何知道要使用的索引，您可能仍需要ngFor="let timeInput of timeInputs; i = index">解决方案。

让我知道我是否完全误解了您的需求！

如何在Angular中获取订阅对象的索引

1 个答案: