Question

我有这样的数组

!GetAtt

我想使用ngFor在HTML表中遍历此对象数组

<source>
  @type dummy
  tag dummy
  @label @INPUT
</source>

<label @INPUT>
  <filter>
    @type record_transformer
    <record>
      username user1
    </record>
  </filter>
  <match>
    @type rewrite_tag_filter
    <rule>
      key username
      pattern /^(.*)/
      tag $1.${tag}
    </rule>
    @label @OUTPUT
  </match>
</label>

<label @OUTPUT>
  <match>
    @type forward
    <security>
      self_hostname output.testing.local
      shared_key    secure_communication_is_awesome
    </security>
    <server>
      host 127.0.0.1
      port 24224
      username user1
      password yes_this_is_user1
    </server>
  </match>
</label>

但是我的代码不起作用

Answer 1

它不是数组数组，您有两个数组。如果要遍历第一个，请使用索引为 posts[0]

 <tr *ngFor="let post of posts[0]">
      <td>{{post.user}}</td>
      <td>{{post.nice}}</td>
      <td>{{post.sys}}</td>
      <td>{{post.CPU}}</td>
      <td>{{post.irq}}</td>
  </tr>

STACBKLITZ DEMO

Answer 2

您可以使用ng-container来保存一个ngFor，然后在ngFor标签中进行第二个tr，如下所示：

<tbody>
    <ng-container *ngFor="let group of posts">
        <tr *ngFor="let post of group">
            <td>{{post.user}}</td>
            <td>{{post.nice}}</td>
            <td>{{post.sys}}</td>
            <td>{{post.CPU}}</td>
            <td>{{post.irq}}</td>
        </tr>
    </ng-container>
</tbody>

* ngFor遍历数组Angular6的数组

2 个答案: