Question

我有一个chatborad应用程序，每个帖子下都有评论，但是我创建了一个按钮，可以折叠所有评论以获得更好的视图，尤其是当它们增长时。

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
    <ul class="list-group">
      <li class="list-group-item" *ngFor="let comment of commentArr">{{ comment.body }}
        <div class="input-group-prepend float-right">
          <span class="input-group-text" id="inputGroup-sizing-sm">{{ comment.userName }}</span>
        </div>
      </li>
    </ul>
  </div>

现在所有的评论都在被折叠时被添加，虽然我正在使用“show”，因为我想在添加它们时显示它们，然后如果它们长大我就可以折叠它们。

另一个问题是，现在当我点击任意“截图中显示的蓝色添加评论按钮”中的折叠按钮时，它只会折叠第一篇文章的评论，如何让每个添加按钮折叠它自己的评论？

谢谢你！

see the blue button for collapsing comments, adding comments is bound with onEnter()

Answer 1

以这种方式做到。

示例app：

app.component.ts

export class AppComponent {
  title = 'app';
  hotels = [
    {name: 'Hotel1', comment: 'Hotel1 info'},
    {name: 'Hotel2', comment: 'Hotel2 info'},
    {name: 'Hotel3', comment: 'Hotel3 info'}

  ];
  prevHotel: any;

  changeIsShohToTrue(hotel) {
    if (this.prevHotel && this.prevHotel.expand && this.prevHotel !== hotel) {
      hotel.expand = false;
    }
    hotel.expand = !hotel.expand;
    this.prevHotel = hotel;

  }
}

app.component.html

<div *ngFor="let hotel of hotels">
    <div>{{ hotel.name }}</div>
    <div>
      <button (click)="changeIsShohToTrue(hotel)" type="button" class="btn btn-default btn"><i
        class="glyphicon glyphicon-align-justify"></i></button>
    </div>

    <div *ngIf="hotel.expand">Comment: {{hotel.comment}}</div>
  </div>

在角度重叠中折叠

1 个答案: