angular 6 中 jquery 的 $.each 的替代品答案

【问题标题】：alternative of jquery's $.each in angular 6angular 6 中 jquery 的 $.each 的替代品
【发布时间】：2019-03-27 07:33:41
【问题描述】：

我想按每个元素的类循环遍历每个元素，以便在 src 属性中设置新值。下面是 jquery 代码，我怎样才能用 angular 用 typescript 重写

$(".image").each(function () {
    $(this).attr("src","http://xxx/xxx.png");
});

【问题讨论】：

您遇到了什么问题？
你不会的。使用属性绑定直接绑定到每张图片的src元素。
您通常不会在 Angular 中修改 DOM。您修改作为单点事实的模型，并且相应地修改视图。你需要学习如何以 Angular 的方式做事，而不是 jQuery 的方式。
在我的情况下，我将 html 动态附加到模板。之后我想更改元素的 src。有没有办法在打字稿@JBNizet 中做到这一点

标签： angular typescript angular6

【解决方案1】：

我认为这可能会对您有所帮助：

Array.from(document.getElementsByClassName("image")).forEach(function(item) {
    var image_link=item.getAttribute('href');
    item.setAttribute('src',"path");
});

详情请查看：For loop for HTMLCollection elements

【讨论】：

感谢我正在寻找的@Anoop Sanker

【解决方案2】：

尝试使用相反的方法 - 在组件内存储集合并在视图内迭代：

component.ts

public urls = ['url1', 'url2'];

component.html

<img *ngFor="let url of urls" [src]="url">

如果您现在更改 urls 中的某些内容，它将影响视图。

【讨论】：

在我的情况下，我动态地将 html 附加到模板中。之后我想更改元素的 src。有没有办法在打字稿中做到这一点@Patryk Uszyński
@Vishnudas 你可以从空的urls 数组开始。当您动态推送新项目时，它将被渲染。