Question

我已经在墙上晃了两天，只是为了将点击事件附加到动态创建的按钮上。（click），ng-click，on-click指令不适用于动态Dom，因为这些指令需要编译。

我有创建动态html元素的要求（按钮是其中之一），但是以某种方式，我在如何附加事件方面陷入困境。在onClick上调用ts方法也不起作用。

我到处都是，但无济于事。如果有人可以照亮，那就万分感谢。

我正在寻找切换到其他框架的方法，因为我发现缺少角度绑定到动态域的事件。我已经筋疲力尽，正在寻找可以做的任何事情，但是没有。

请帮助。

Answer 1

我使用ngFor / ngRepeat解决了自己的问题。诀窍是先声明ngModel变量以用于动态域，最好是使用数组。

就我而言，我需要一个通过添加新标记按钮动态生成的迭代键值对。这是代码段。

<div *ngFor="let tag of resourceTags; index as i" [attr.data-index]="i">
                        <div class="col-sm-5"><input type="text" class="form-control" required="" [(ngModel)]="tag.key" value="{{tag.key}}" placeholder="tag key" /></div>
                        <div class="col-sm-5"><input type="text" class="form-control" required="" [(ngModel)]="tag.value" value="{{tag.value}}" placeholder="tag value" /></div>
                        <div class="col-sm-2" style="padding-top:7px;"><i class="fa fa-minus-circle fa-lg" style="cursor:pointer;" (click)="removeTag(i)"></i></div>
                        <div class="col-sm-12" style="height:5px;">&nbsp;</div>
                    </div>
                    <div class="col-sm-2"><button type="button" class="center btn btn-info btn-xs" (click)="addNewTag()">add new tag</button></div>
                    <div class="col-sm-10">&nbsp;</div>

其中resouceTags被定义为[{'key'：'some key'，'value'：'some value'}，...]的数组变量

只要变量更改内容，Angular就会自动呈现指定的ngFor元素。

addNewTag()只会在resourceTags中添加一个元素，而removeTag则相反。

我很愚蠢，没有更早地想到这一点。

Angular 5-将点击事件动态附加到动态创建的dom

1 个答案: