Angular 用于跨越两行的角度（展开/折叠）

我有一个角度的应用程序。我需要在表格中显示数据列表。我已经在表格的TR元素上申请了ngFor。但是，当展开每一行时，必须显示另一行，其中包含有关该项目的其他详细信息

折叠视图：

扩展视图：

代码：

标题在这里
+折叠行

如果您只需要一个简单的展开和折叠行，那么一个简单的

ngIf

就可以做到：

<tr *ngFor="let item of results">
  <div (click)="item.expanded=!item.expanded">+ Collapsed Row</div>
  <span *ngIf="item.expanded">This is an expanded content</span>
</tr>

然后，使用名为

expandRow

的命名函数：

  expandRow(index: number): void {
    this.expandedIndex = index === this.expandedIndex ? -1 : index;
  }

---

如果您只需要一个简单的展开和折叠行，那么一个简单的

ngIf

就可以了：

<tr *ngFor="let item of results">
  <div (click)="item.expanded=!item.expanded">+ Collapsed Row</div>
  <span *ngIf="item.expanded">This is an expanded content</span>
</tr>

然后，使用名为

expandRow

的命名函数：

  expandRow(index: number): void {
    this.expandedIndex = index === this.expandedIndex ? -1 : index;
  }

---

我也面临同样的问题，没有找到任何好的解决办法。但经过深入研究，我发现了这个ng容器，它工作得非常好。你可以在下面的行动中看到它

打开
关
{{obj.date}
{{obj.subject}}
{{obj.numComents}
议论
{{q}

我也面临同样的问题，没有找到任何好的解决办法。但经过深入研究，我发现了这个ng容器，它工作得非常好。你可以在下面的行动中看到它

打开
关
{{obj.date}
{{obj.subject}}
{{obj.numComents}
议论
{{q}

这不起作用。Div和Span确实在TR中渲染，但表格结构丢失。我基本上需要两个TR（重复），其中一个基于条件可见/隐藏。在那些TRs里面，我需要TDs。不，你不能。您不能让一个两次的

tr

重复两次，更不能根据单个重复实例的条件隐藏和显示。要么你改变你的css（如果这是你关心的），要么你将不得不动态地改变单个

tr

中的内容，这将是非常棒的。如果

可以将

或

作为直接子项…这不起作用。Div和Span确实在TR中渲染，但表格结构丢失。我基本上需要两个TR（重复），其中一个基于条件可见/隐藏。在那些TRs里面，我需要TDs。不，你不能。您不能让一个两次的

tr

重复两次，更不能根据单个重复实例的条件隐藏和显示。要么你改变你的css（如果这是你关心的），要么你将不得不动态地改变单个

tr

中的内容，这将是非常棒的。如果

可以将

或

作为直接子项…是的，此works文件，因为ng容器不创建其他HTML标记是的，此works文件，因为ng容器不创建其他HTML标记

  <ng-container *ngFor="let obj of posts">
            <tr>
                <td>
                    <button (click)="openCloseRow(obj.id)">
                        <span *ngIf="rowSelected!=obj.id; else close">Open</span>
                          <ng-template #close>
                            <span>Close</span>
                            </ng-template>
                    </button>
                </td> 
              <td>{{obj.date}}</td>
              <td>
                  {{obj.subject}}
              </td>
              <td>{{obj.numComents}}</td>
            </tr>
            <tr *ngIf="rowSelected==obj.id">
                <td></td>
                <td colspan="4">
                    <table class="table table-striped">
                        <thead>
                            <tr>                                   
                                <th style="width:15%;">Comment</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let q of obj.comments">                                  
                                <td style="width:15%;">{{q}}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
          </ng-container>