Angular цикл с использованием * ngFor - PullRequest
Новая
       19

Angular цикл с использованием * ngFor

0 голосов
/ 03 августа 2020

Я новичок в Angular, я разрабатываю веб-сайт в Angular 8, и у меня на одной из моих страниц есть: 

    const gridTableCells = document.querySelectorAll('.grid-table > div');
    gridTableCells.forEach((cell) => {
      const orderNum = cell.getAttribute('order');
      (orderNum % 2 !== 0) && (cell.className = '--is-striped');
    });
/* Grid Table */
.grid-table {
    width: 100%;
    border: 0px solid red;
    margin: 2em 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, auto);
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-table > div {
    background-color: #fff;
    border: 1px solid #f2f2f2;
    padding: 1rem;
  }
  .grid-table > div.--is-striped {
    background-color: #f2f2f2;
  }
  .grid-table div.thead {
      background-color: #eee;
      font-weight: bold;
      text-transform: uppercase;
  }
  .grid-table div a {
      margin-right: 1em;
  }
    <!-- Year-wise Grid Table -->
<div class="grid-table">
    <div order="1" class="thead">Year</div>
    <div order="2"><p>2020</p></div>
    <div order="3"><p>2019</p></div>
    <div order="4"><p>2018</p></div>
    <div order="5"><p>2017</p></div>
    <div order="6"><p>2016</p></div>
    <div order="7"><p>2010</p></div>

    <div order="1" class="thead">some text</div>
    <div order="2"><p>some text</p></div>
    <div order="3"><p>some text</p></div>
    <div order="4"><p>some text</p></div>
    <div order="5"><p>some text</p></div>
    <div order="6"><p>some text</p></div>
    <div order="7"><p>some text</p></div>

    <div order="1" class="thead">Company</div>
    <div order="2">
        <a class="external" href="#">some text</a>, <a class="external" href="#">some text</a>, <a class="external" href="#">some text</a>
        
    </div>
    <div order="3"><a class="external" href="#">some text</a>, <a class="external" href="#">some text</a></div>
    <div order="4"><a class="external" href="#">some text</a></div>
    <div order="5"><a class="external" href="#">some text</a></div>
    <div order="6"><a class="external" href="#">some text</a>, <a class="external" href="#">some text</a></div>
    <div order="7"><a class="external" href="#">some text</a></div>
  </div>
<!-- /Year-wise Grid Table -->

Теперь мой вопрос заключается в том, что это не просто stati c в моем компоненте. html который создает таблицу данных, но вместо кода stati c HTML я хочу l oop использовать * ngFor, я не знаю, как это сделать? Любая помощь? или любой справочный URL, по которому я могу учиться?

Ответы [ 2 ]

1 голос
/ 03 августа 2020

Я создал для вас простой Stackblitz , который использует Angular s Mat Table так, как вам нужно. Обратите внимание, как я использовал директиву ngfor для отображения ссылок в столбце компании.

таблица. html

<div *ngFor="let link of element.company">
    <a href={{link.link}}>{{link.link_text}}</a>
</div>

Я бы посоветовал вам go через Angular документы для изучения новых директив или концепций.

0 голосов
/ 03 августа 2020

Вы можете узнать это на angular сайте: https://angular.io/guide/displaying-data

...