Angular，如何在从服务器获取数据并应用 *ngFor 后通过 Jquery 获取类？

Posted 2023-05-07

【中文标题】Angular，如何在从服务器获取数据并应用 *ngFor 后通过 Jquery 获取类？

【英文标题】：Angular, How to get classes by Jquery after getting data from server and *ngFor has been applied for them?

【发布时间】：2021-08-15 09:30:12

【问题描述】：

我在 Angular 中使用带有 typescript 的 Jquery， 我想获取 ngFor 循环生成的所有类。 我正在建立一个产品网站... 我正在从 node.JS 服务器获取产品... 在我拿到产品后，我正在为他们申请 ngFor， 在这个 ngFor 中，我使用了一个类名 imagePopup， 当我运行这段代码时 让 x = $('.imagePopup'); 我得到 x.length = 0; 我没有从 ngFor 循环中获取类.. 我怎样才能获得所有这些？

我的代码：

ngOnInit(): void 
   this.productsSubjectSubscribe = this.localProductService.myProductsSubject.subscribe(x=> 
       this.myProducts = x;
       let y = $('.open-poup-image');
       console.log(y);
   );

console.log(y) 得到长度 = 0

<div *ngFor="let item of myProducts;index as i" class="item" [id]="'item_'+item._id">
     <div class="item_img">
          <a class="open-poup-image"
            [href]="'src-to-image.jpg">Open
            image</a>
          <img
            [src]="src-to-image.jpg">
        </div>
</div>

【问题讨论】：

如果没有看到您的代码，很难确定问题出在哪里。

在 Angular 中，要获取一系列 div 的引用，使用 ViewChildren：请参阅文档：angular.io/api/core/ViewChildren。好吧，文档不是很清楚，您可以使用 templateReference 变量（html标签中的简单#myelement并使用@ViewChildren('myelement') elements:QueryList<ElementRef>）

我已经编辑了问题并添加了一些代码...

我建议寻找不使用jQuery的替代方案，例如fancyapps.com/docs/ui/fancybox

【参考方案1】：

如果我可以提供建议，请不要将 jQuery 与 Angular 一起使用。它会导致很多问题：/ 向我们展示您的代码，我们会尝试找出如何解决它:)