如何訪問在Angular12中動態創建的元素

我在 Angular 12 專案中使用類似于 datatables.net 的表（它不一樣，但非常相似）。

我需要用如下資料填充表：

“洗掉”操作是一個看起來像鏈接的按鈕，它將洗掉當前行。

當用戶第一次來到桌子時，它需要是空的。用戶使用按鈕從 csv 檔案匯入資料。

在 html 組件中，表格如下所示：

<table data-table="tt__table">
</table>
<input type="button" value="Import" (click)="importData()" />

當我在打字稿中從 csv 匯入資料時，我有類似的東西：

ngAfterViewInit(): void {       
  let options = {
    data: {
      headings: ["Id", "Name", "Actions"],
      rows: [
        {
          data: ["", "", ""]
        }
       ]
     }
   };
        
   this.tableElement = document.querySelector('[data-table=\"tt__table\"]') as Element;
   this.table = new Table(this.tableElement, options);            
}
...
importData(): void{
  let importedData = {
          "type": 'csv',
          "data": '0,John,<button data-toggle="tt__btn" deleteRow($event)">Delete</button>'
       };
        
  this.table.deleteAll();
  this.table.import(importedData); // rows are created on the fly using vanilla js.
        
  const tableButtons = document.querySelectorAll('[data-toggle=\"tt__btn\"]');
  tableButtons.forEach(button => {
    new Button(button, {})
  });
}
        
deleteRow(event): void{
             // Delete row.
          }

單擊“添加”按鈕后，匯入的資料看起來很好：

但是當我點擊“洗掉”按鈕時，它什么也沒做。

我懷疑原因是 Angular 看不到創建的新 DOM 元素，因為單擊“添加”按鈕后的 HTML 如下所示：

<tbody>
  <tr>
     <td data-content="0">0</td>
     <td data-content="John">John</td>
     <td data-content="Delete">
        <button data-toggle="tt__btn" class="tt__btn-link" (click)="deleteRow($event)">Delete</button>
     </td>
  </tr>
</tbody>

但是在我使用“(click)”角度指令的其他組件中，最終的 HTML 不顯示“(click)”指令。

我對角度很陌生，你能幫我解決這個問題嗎？

uj5u.com熱心網友回復：

我通過使用 Renderer2 來監聽 DOM 事件來解決它。

1. 首先，我在建構式中注入了 renderer2：

   import { AfterViewInit, Renderer2, OnDestroy } from '@angular/core';
   unlistener: () => void;
   ...
   constructor(private renderer: Renderer2) {
   ...
   }
   

2. 然后我向渲染器實體添加了一個偵聽器，它偵聽 DOM 表“單擊”事件并呼叫“deleteRow”函式：

   ngAfterViewInit(): void {
     ...
     this.tableElement = document.querySelector('[data-table=\"tt__table\"]') as Element;
   
     unlistener = this.renderer.listen(this.tableElement, "click", event => 
     this.deleteRow(event));
   
     this.table = new Table(this.tableElement, options);
     ...
   }
   

3. “deleteRow”函式捕獲表中的點擊事件并根據按鈕 id（具有用戶 id）洗掉行：

   deleteRow(event: any): void {
     let userId: string = '';
     let userToDelete: User;
     let userIndex: number = -1;
   
     if (event !== null && event !== undefined) {
       if (event.target instanceof HTMLButtonElement) {
         userId = event.target.id;
           if (userId !== '') {
              userToDelete = this.selectedUsers.find(u => u.userId === userId) as User;
             if (userToDelete !== null && userToDelete !== undefined) {
               userIndex = this.selectedUsers.indexOf(userToDelete);
               this.selectedUsers.splice(userIndex, 1);
               this.updateTable();
             }
           }
         }
       }
     }
   

4. 在 ngOnDestroy() 鉤子中添加 unlistener 以停止監聽 DOM 事件：

    ngOnDestroy(): void {
      this.unlistener();
    }
   

感謝您的回復，特別是對@Mohamed Babei 的回復，他的回答為我的研究提供了啟示。

該解決方案基于Angular（第 3 部分：Renderer2.listen）文章中監聽 DOM 事件的四種方式。

uj5u.com熱心網友回復：

您不能以這種方式系結角度事件，因此您需要以表格角度方式呈現資料，例如使用 '''*ngFor''' 或者如果你想按照自己的方式使用 addEventListener(click) 在呈現內容后

標籤：

上一篇：使用CUDA在C中并行化基數排序的問題

下一篇：如何使用命令提示符將檔案夾中的所有檔案重命名為xxx{incremental}.jpg