使用 *ngFor 的角度循环

Question

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

现在我的问题是，我不只是在生成数据表的 component.html 中是静态的，而是我想使用 *ngFor 循环它，而不是静态 HTML 代码，我不知道如何去做吧？有什么帮助吗？或任何我可以学习的参考网址？

Answer 1

我为您创建了一个简单的Stackblitz，它以您想要的表格的方式使用Angular 的Mat Table。请注意我是如何使用ngfor 指令在公司列中显示链接的。

table.html

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

我建议你通过 Angular docs 学习新的指令或概念。

Answer 2

您可以在 Angular 网站中了解到： https://angular.io/guide/displaying-data