Angular获取ngFor渲染按钮文本 实现模态框差异化内容展示

你不需要手动获取按钮DOM的文本内容，在*ngFor的循环上下文里可以直接拿到当前遍历项的所有数据，直接作为参数传给点击事件方法即可，这是Angular框架推荐的写法，稳定性远高于操作DOM读文本。

具体实现步骤 #

• 修改模板中的点击事件，直接传入当前循环项的作者数据
  原有代码把*ngFor写在<tbody>上会生成多个tbody标签，不符合HTML表格规范，建议把循环写到<tr>标签上，修改后的模板代码如下：

  <tbody>
    <tr *ngFor="let book of tableBooklist">
      <td>{{book.title}}</td>
      <td>
        <!-- 直接把当前book对应的author作为参数传入点击方法 -->
        <button (click)="toggleModal(book.author)" class="btn btn-link">
          {{book.author.nameAut + ' ' + book.author.surnameAut}}
        </button>
      </td>
      <td>{{book.publicationYear}}</td>
      <td>{{book.publisher}}</td>
      <td>{{book.genre}}</td>
      <td>{{book.numberOfCopies}}</td>
      <td>{{book.firstPublication}}</td>
    </tr>
  </tbody>
  

• 修改组件TS类中的方法，接收传入的作者参数，供模态框调用

  // 定义属性存储当前选中的作者，模态框直接绑定该属性即可渲染差异化内容
  currentActiveAuthor: any; // 若项目中定义了Author类型接口，可将any替换为对应类型
  
  toggleModal(author: any) {
    this.currentActiveAuthor = author;
    // 保留你原有的模态框显隐控制逻辑即可
    // 例：this.isModalShow = !this.isModalShow;
  }
  

注意事项 #

• 不推荐通过传入$event对象读取DOM文本的方式实现需求：这种方式需要操作原生DOM，后续如果按钮内增加图标、调整文本排版，很容易出现读取内容错误的问题，且不符合Angular数据驱动的开发思路。
• 直接传入完整作者对象后，模态框内可以直接读取作者的所有字段（比如简介、生卒年等其他详情属性），不需要额外根据作者姓名去原数组做匹配查询，减少冗余逻辑。

内容的提问来源于stack exchange，提问作者Tymi