Использование NgFor вместо HTML - PullRequest
Новая
       5

Использование NgFor вместо HTML

0 голосов
/ 05 ноября 2018

Я относительно новичок в 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>

Элемент, который я хотел бы использовать для зацикливания, это следующие теги: ЦСИ HREF альт

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

В вашем 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>
0 голосов
/ 05 ноября 2018

в вашем компоненте: 

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 для их обхода и использовать результаты набора данных.

...