Как связать динамическую функцию с элементом HTML, используя angular 6?
Я пытаюсь связать событие с динамически созданным элементом. Я довольно успешен, но я не могу привязать функцию к событию. вот мой код
.ts-код
data = ['fn1()', 'fn2()', 'fn3()'];
fn1() { alert(1) }
fn2() { alert(2) }
fn3() { alert(3) }
HTML-код
table>
<ng-container *ngFor='let d of data'>
<tr (click)=d>
<td>
:) !!!
</td>
</tr>
</ng-container>
но когда я добавляю функцию статически, она вызывается, т.е.
<table>
<ng-container *ngFor='let d of data'>
<tr (click)=fn1()>
<td>
:) !!!
</td>
</tr>
</ng-container>
</table>
это работает, может ли кто-нибудь помочь мне в этом?
Ответы 1
Вам нужен массив функций, а не массив строк. И вы хотите вызвать функцию при нажатии на div:
Машинопись:
fn1 = () => { alert(1) };
fn2 = () => { alert(2) };
fn3 = () => { alert(3) };
data = [this.fn1, this.fn2, this.fn3];
HTML:
<div (click) = "d()">
ну, это не работает, когда я вызываю вот так <tr (click)=d>
Нажмите на ссылку Demo, и вы увидите, что она работает. Поэтому, если он не работает с вашим кодом, это означает, что ваш код не совпадает с моим ответом. Опубликуйте полный пример stackblitz, как это сделал я.
не могли бы вы объяснить мне, как это работает, пожалуйста. Спасибо за вашу помощь
Он создает массив функций, перебирает его и создает div для каждой из них. При нажатии на div благодаря (click) = "d()" выполняется оператор d() и выполняется функция, хранящаяся в переменной d, которая является одной из функций массива.
как я передам параметр в этом? fn1 = (данные) => {};
Ваши функции не принимают никаких параметров. Они предупреждают о жестко запрограммированном значении. Зачем вам передавать параметры?
Я только что вставил простой код, чтобы люди сосредоточились на решении и не потеряли логику, которую я реализовал. в реальной логике мне также потребуется передать параметр, не могли бы вы подсказать мне, как это сделать? Спасибо
Так же. Объявляйте параметры в своих функциях ((foo: string, bar: number) => alert(foo, bar), и передайте значения параметров при вызове функции: d('bla', 1).
но параметр будет динамическим? тогда я должен передать его только в массиве
мы не можем сделать что-то вроде этого? data = [this.fn1(1), this.fn2(2), this.fn3(3)];
Можно, но тогда у вас не будет набора функций. у вас будет массив, содержащий результаты вызовов fn1, fn2 и fn3. Если у вас есть круглые скобки после имени функции, это означает, что вы вызываете функцию. Чего вы пытаетесь достичь, на самом деле?
привет, не могли бы вы просто проверить мой отредактированный вопрос, пожалуйста