使用 NgFor 代替 HTML答案

【问题标题】：Using NgFor instead of HTML使用 NgFor 代替 HTML
【发布时间】：2019-04-09 05:12:12
【问题描述】：

我对 Angular 比较陌生，我知道肯定有比我正在做的更好的方法。我想使用 ngfor 循环并吐出这些信息，而不是手动输入。有什么建议吗？

这是我的代码：

<section class="eighth-section our-work">
    <h2 class="uppercase">Our work</h2>
    <a target="blank" href="">
        <img class="lazy our-work__img"
             src="./assets/images/our-work/kma-logo.png"
             alt="KMA Logo"></a>
    <a target="blank" href="https://fwchiro.com/forms/">
        <img class="lazy our-work__img"
             src="./assets/images/ourwork/DF_FWChiroLogo.png"
             alt="Functional Wellness Chiropractic logo"></a>
    <a target="blank" href="https://www.608motorsports.com/">
        <img class="lazy our-work__img"
             src="./assets/images/ourwork/DF_608logo.png"
             alt="608 Motorsports Logo"></a>
    <a target="blank" href="https://dektex.com/">
        <img class="lazy our-work__img"
             src="./assets/images/ourwork/DF_dektexlogo.png"
             alt="DekTex Logo"></a>
    <a target="blank" href="https://kswconstruction.com/">
        <img class="lazy our-work__img"
             src="./assets/images/ourwork/DF_KSWLogo.png"
             alt="KSW Construction Logo"></a>
    <a target="blank" href="https://bzcustomfinishing.com/">
        <img class="lazy our-work__img"
             src="./assets/images/ourwork/DF_BZlogo.png"
             alt="BZ Custom Finishing Logo"></a>
    <a target="blank" href="https://familyfirstverona.com/">
        <img class="lazy our-work__img"
             src="./assets/images/ourwork/DF_famfirstlogo.png"
             alt="Family First Logo"></a>
    <a target="blank" href="https://hamiltonconcretepro.com/">
        <img class="lazy our-work__img"
             src="./assets/images/ourwork/Hamilton_Logo.png"
             alt="Hamilton Concrete Logo"></a>
</section>

我想用于循环的项目是以下标签：源代码链接替代

提前致谢！

【问题讨论】：

标签： html angular ngfor

【解决方案1】：

在您的组件中：

public links = [
  {src: 'your_src_1', href: 'your_href_1', alt: 'your alt text 1'},
  {src: 'your_src_2', href: 'your_href_2', alt: 'your alt text 2'},
  {src: 'your_src_3', href: 'your_href_3', alt: 'your alt text 3'},
  {src: 'your_src_4', href: 'your_href_4', alt: 'your alt text 4'},
];

在您的模板中：

<a *ngFor="let link of links" target="blank" [href]="link.href"><img class="lazy our-work__img" [src]="link.src" [alt]="link.alt"></a>

应该做的伎俩

关键是您需要一个包含所有参数对象的数据数组。然后您可以使用 ngFor 循环它们并使用数据集结果。

【讨论】：

太棒了，这成功了！我试图让它成为一个变量，并用“这个”来做一些事情，我还有更多的学习要做。谢谢一群被遗弃的人！

【解决方案2】：

您的 JS 中可以有一个绑定到 HTML 的对象。这是一个示例。不过，您应该添加所有 7 个项目。

$scope.foo = [
    {'href' : '',
     'src': '',
     'alt': ''}
]

在您的 HTML 中，您可以使用 ng-repeat 来实现循环：

<section class="eighth-section our-work">
  <h2 class="uppercase">Our Work</h2>
    <div ng-repeat="item in foo">
      <a target="blank" href="item.href"><img class="lazy our-work__img" src="item.src" alt="item.alt"></a>
    </div>
  </section>

【讨论】：

OP 标记了 Angular，而不是 AngularJS