Question

我正在使用Angular 5.

当typeId等于3时，我想只显示一次表头。

而且当数据的typeId都不等于3时，我想隐藏整个表，不再显示表头。

请参阅下面的代码和数据：

代码：

<table>
    <ng-container *ngFor="let attachment of data.Data.Summary.Attachment">
        <ng-container *ngIf="attachment.typeId=='3'">  
            <thead>
                <tr>
                    <th>File</th>
                    <th>Description</th>
                    <th>Date</th>
                </tr>
            </thead>
        </ng-container>
    </ng-container>
    <tbody>
        <ng-container *ngFor="let attachment of data.Data.Summary.Attachment">
            <tr *ngIf="attachment.typeId=='3'">  
                <td>{{ attachment.file }}</td>
                <td>{{ attachment.description }}</td>
                <td>{{ attachment.date }}</td>
            </tr>
        </ng-container>
    </tbody>      
</table>

数据：

{
    "Data": {
        "Summary": {
            "Attachment": [
              {
                "typeId": "3",
                "file": "a.pdf",
                "description": "File A",
                "date": "05/03/2017"
              },
              {
                "typeId": "3",
                "file": "b.pdf",
                "description": "File B",
                "date": "05/03/2017"
              },
              {
                "typeId": "1",
                "file": "c.pdf",
                "description": "File C",
                "date": "05/03/2017"
              },
              {
                "typeId": "3",
                "file": "d.pdf",
                "description": "File D",
                "date": "05/03/2017"
              }
            ]
        }
    }
}

结果：

File       Description    Date
a.pdf      File A         05/03/2017
b.pdf      File B         05/03/2017
d.pdf      File D         05/03/2017

提前谢谢。

Answer 1

这不是一个真正的角色＆＃34;问题，更多的是一个javascript问题。在组件中，您可以创建一个方法isHeaderVisible()，该方法决定标题是否可见并使用它。类似的东西：

isHeaderVisible() {
  return this.data.Data.Summary.Attachment.some(attachment => attachment.typeId === '3')
}

另外，在组件中进行数据过滤可能更好，而不是组件的模板。所以做一些像

这样的事情

visibleAttachments() {
  return this.data.Data.Summary.Attachment.filter(attachment => attachment.typeId === '3')
}

将它们放在一起，模板可能如下所示：

<table>
    <thead *ngIf="isHeaderVisible()">
      <tr>
        <th>File</th>
        <th>Description</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let attachment of visibleAttachments()">  
        <td>{{ attachment.file }}</td>
        <td>{{ attachment.description }}</td>
        <td>{{ attachment.date }}</td>
      </tr>
    </tbody>      
</table>

或者你可以简单地<thead *ngIf="visibleAttachments().length > 0">并摆脱isHeaderVisible()。此时，您也可以将*ngIf移动到<table>元素而不是<thead>元素，因为听起来您只想显示此表，如果附件{ {1}}存在。

所以：

typeId === '3'

角度显示表标题只有一次，如果没有数据则隐藏标题

1 个答案: