angular 6 click not working html 代码存在于 typescript 文件中答案

【问题标题】：angular 6 click not working html code present in typescript fileangular 6 click not working html 代码存在于 typescript 文件中
【发布时间】：2021-05-01 11:28:40
【问题描述】：

这个问题可能会被问到，但这并不能解决我的问题。我有Angular 6 项目。在我的 ts 组件中，我添加了 button 标签。我尝试调用remove 方法，但它不起作用。

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
declare var $:any;

@Component({templateUrl: 'login.component.html'})
export class detectionRuleComponent implements OnInit {

    constructor(
        private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router) {}

    ngOnInit() {}

    addNewRow(){
        var new_row = `<button (click)="remove($event)">Remove</button>`;
    }

    remove(){
        alert();
    }
}

当我点击删除按钮时，alert() 没有出现。请帮我解决这个问题。

【问题讨论】：

标签： javascript angular methods angular6

【解决方案1】：

为什么你在一种方法中添加了一个模板？

如果您想在模板中显示删除按钮，只需这样做。

在这个组件中login.component.html

<button (click)="remove($event)">Remove</button>;

然后在你的 TS 中只写你的逻辑。

remove(event) {    
    alert(event);
}

还有一个问题，为什么需要 jQuery 标签$？

【讨论】：

您好，感谢您的回答。实际上我尝试添加动态添加和删除行。谢谢为什么在 ts 中使用 html 标签
@RameshS 然后添加你的 HTML 代码，看看你想在那里做什么。

【解决方案2】：

Angular 的工作方式是，如果您通过 ts 文件注入 HTML sn-p 来操作 DOM，Angular 不会在您注入的 sn-p 中注册该指令。因此，最好不要那样操作 DOM！因此，对于您的问题，您的 remove 方法根本没有为 click 指令注册，因此不会被调用。它也没有合适的参数。

<!--HTML--->
<button (click)="addCicked($event)">Add</button>

<div *ngIf="isNewRowAdded">
 <button (click)="removeCicked($event)">remove</button>
</div>

addCicked(event){
  this.isNewRowAdded = true;
}

removeCicked(event){
  alert('Remove Clicked')
}

如果你真的想直接操作 DOM，你可以使用 ElementRef！

【讨论】：

您好，感谢您的回答。实际上我尝试添加动态添加和删除行。谢谢为什么在ts中使用html标签所以请帮我解决我的问题