Нельзя использовать любое другое имя переменной, кроме $event, для получения испускаемого числа в Angular

NB. Вопрос не в том, чтобы как заставить его работать (так как могу, как объяснил внизу). Это скорее про Зачем Я могу заставить его работать так и никак иначе.

Я разработал такой компонент. Это строка данных, которая может содержать несколько строк данных. Следовательно, в каждом таком случае у нас есть как onRemoval (вызывается, когда пользователь щелкает значок удаления), так и onRemove (вызывается, когда слышен эвент).

@Output() remove: EventEmitter<number> = new EventEmitter<number>();
...
onRemoval() {
  console.info("being removed: " + this.id);
  this.remove.emit(this.id);
}
onRemove(id: number) {
  console.info("removing: " + id);
  if (!id)
    return;

  this.subRows.splice(id, 1);
}

Я уверен, что упустил что-то глупое, но что меня озадачивает, когда я пытаюсь его отладить, так это то, что испускаемое значение является правильным индексом, а полученное значение - нет. Это неопределенный.

Соответствующая часть разметки, которую я пробовал, выглядит так. Я также пробовал с пустыми скобками, а также без скобок.

<div *ngIf = "unfolded">
  <app-data-row *ngFor = "let subRow of subRows"
                (remove) = "onRemove(id)"
                [config] = "subRow"></app-data-row>
</div>

Я гуглил это, но, насколько я мог судить, я следовал правильному подходу, используя эмиттер событий. Кроме того, кажется, что настройка работает, поскольку событие отправляется и принимается. Просто значение я бы, похоже, установлено неправильно.

Единственный способ заставить это работать — вызвать переменную точно$событие и никак иначе. Это я делаю что-то глупое или это требуемый синтаксис?! Я имею в виду, что даже *$id$ не помог...

Вы можете прочитать это здесь в документации

Poul Kruijt 07.04.2019 20:16
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
1
45
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В шаблоне при подключении вывода дочернего элемента к обратному вызову компонента: $event - это имя выдаваемого значения, и нет никакого способа обойти это. В конце концов: вызов обработчика не нужно, чтобы иметь вывод в качестве единственного аргумента. Вы могли бы сделать, не знаю,

<app-data-row *ngFor = "let subRow of subRows" (remove) = "onRemove(subRow.id)">

или

<app-data-row *ngFor = "let subRow of subRows" (remove) = "onRemove(subRow.id, $event)">

или

<app-data-row *ngFor = "let subRow of subRows" (remove) = "onRemove($event, subRow.id)">

и так далее и тому подобное. Итак, здесь, в шаблоне, $event необходим как идентификатор фактического выходного значения.

Теперь, когда вы так говорите, это имеет смысл. Думаю, это был тот день, когда человеку не везет, когда он пытается думать, хе-хе.

Konrad Viltersten 07.04.2019 20:22

$event — это само событие при использовании @Output генератора событий компонента/директивы, который выдает значение, и оно захватывается функцией обратного вызова с переменной $event.

Когда вы определяете прослушиватель событий с помощью круглых скобок, таких как

(remove) = "onRemove($event)"

вы фактически передаете ссылку на метод. Вам не нужна локальная переменная, определенная ранее. А сам Angular заменяет значение $event на сгенерированное. Но если вы сделаете это как

(remove) = "onRemove(id)"

он считает id локальной переменной, такой как вы определяете в *ngFor = "let id of idList"

Короче говоря, это единственный способ зафиксировать испускаемое значение при использовании эмиттера выходных событий компонента/директивы.

Вы можете ознакомиться с этой официальной документацией: https://angular.io/guide/user-input

А также этот SO поток: Что именно делает объект $event в Angular 2?

Другие вопросы по теме