使用 NgFor 而不是 HTML

Question

我是 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>

我想用于循环的项目是以下标签：来源参考资料替代

提前致谢！

Answer 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 循环遍历它们并使用数据集结果。

Answer 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>

使用 NgFor 而不是 HTML

Using NgFor instead of HTML

html

ngfor

angular