Как получить индекс подписанного объекта в Angular

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); выводundefined, поэтому функция 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, в частности с субъектом "beginEditing", но я никогда не вижу, чтобы этот субъект использовал .next().Мне также не ясно, как он узнал бы, что это за индекс.

Для более узкого подхода вы можете просто передать значение 'index' прямо в функцию onDelete ().Для этого в вашей директиве ngFor вы делаете следующее:

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

Затем, когда вы вызываете delete

<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">.

Дайте мне знать, если ясовершенно неправильно понял, что вам нужно!