Angular4杂货清单应用：Jquery获取li的innerHTML返回undefined求助

嘿，我来帮你搞定这个问题！首先咱们先分析下你遇到的核心问题，然后给出更贴合Angular设计理念的解决方案～

为什么你的jQuery代码会返回undefined？ #

1. jQuery对象与原生DOM元素混淆：$(this)是jQuery包装后的对象，它并没有innerHTML属性。你可以换成jQuery的html()方法，或者直接访问原生DOM元素的innerHTML：

   // 方法1：使用jQuery的html()方法
   $('li').hover(function(){ console.log($(this).html()); });
   // 方法2：直接用原生DOM元素的innerHTML
   $('li').hover(function(){ console.log(this.innerHTML); });
   

2. 异步渲染导致绑定失效：Angular的*ngFor是异步渲染列表项的，如果你在组件初始化阶段直接执行jQuery绑定，这时候<li>元素还没被渲染到DOM中，绑定根本作用不到实际的列表项上。如果一定要用jQuery，得等到视图初始化完成后再执行绑定，也就是在组件的ngAfterViewInit钩子函数里操作：

   import { Component, AfterViewInit } from '@angular/core';
   declare var $: any; // 确保jQuery已引入并声明
   
   @Component({
     // 组件元数据（如selector、templateUrl等）
   })
   export class GroceryListComponent implements AfterViewInit {
     groceries: string[] = ['苹果', '牛奶', '面包']; // 示例数据
   
     ngAfterViewInit() {
       $('li').hover(function(){ console.log($(this).html()); });
     }
   }
   

更推荐的Angular原生实现方式 #

在Angular里，我们应该尽量避免直接操作DOM（包括用jQuery），而是采用数据驱动的方式实现功能，这更符合Angular的设计逻辑，也更容易维护。

步骤1：组件类定义数据与方法 #

在你的组件类里，添加收藏数组和添加收藏的方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-grocery-list',
  templateUrl: './grocery-list.component.html'
})
export class GroceryListComponent {
  groceries: string[] = ['苹果', '牛奶', '面包', '鸡蛋']; // 你的杂货列表数据
  favorites: string[] = []; // 收藏数组

  // 点击列表项添加到收藏（支持去重）
  addToFavorites(item: string) {
    if (!this.favorites.includes(item)) {
      this.favorites.push(item);
    }
  }
}

步骤2：模板绑定事件与渲染收藏区域 #

修改HTML模板，给列表项添加点击事件，同时渲染收藏区域：

<div class="col-m-6">
  <h3 class="text-primary">All Items</h3>
  <ol>
    <!-- 给li绑定点击事件，传递当前杂货项 -->
    <li class="listItem" *ngFor="let g of groceries" (click)="addToFavorites(g)">
      {{g}}
    </li>
  </ol>
</div>

<!-- 收藏区域 -->
<div class="col-m-6">
  <h3 class="text-success">Favorites</h3>
  <ul>
    <li *ngFor="let f of favorites">{{f}}</li>
  </ul>
</div>

这样用户点击列表项时，对应的杂货就会被添加到收藏数组，Angular会自动更新收藏区域的视图，完全不需要手动操作DOM～如果你的需求是鼠标悬停时添加，只需要把(click)改成(mouseover)即可。

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